js监听键盘事件的方法_原生和jquery的区别详解,js鼠标按键事件和键盘按键事件用法实例汇总

某个键盘的键被松开,当用户按下某一按键时,本文实例讲述了js鼠标按键事件和键盘按键事件用法,属于你的鼠标按键

经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对。去以下介绍两种不同的方式

本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考,具体如下:

原生键盘监听事件:按下一次按键,分为三个过程,按下—按住—松开

keydown,keyup,keypress:属于你的键盘按键

onkeydown:某个键被按下
onkeypress:某个键盘的键被按下或按住
onkeyup:某个键盘的键被松开

mousedown,mouseup:属于你的鼠标按键

使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上

当按钮被按下时,发生 keydown 事件,

以下是原生的使用案例

keyup是在用户将按键抬起的时候才会触发的,

//实际使用 
document.onkeydown=function(e){  //对整个页面文档监听 
var keyNum=window.event ? e.keyCode :e.which;  //获取被按下的键值 
//判断如果用户按下了回车键(keycody=13) 


if(keyNum==13){ 
alert('您按下了回车'); 
} 

//判断如果用户按下了空格键(keycode=32), 
if(keyNum==32){ 
   alert('您按下了空格'); 
  } 

完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

剩下另外两个按键方法同理

当用户在这个元素上按下鼠标键的时候,发生mousedown

jquery的方式监听键盘事件

当用户在这个元素上松开鼠标键的时候,发生mouseup

jquery的也分为三个过程,但是在事件名称上有所不同

例子

keyup:某个键盘的键被松开

1. 鼠标的哪个按键被点击

keydown:某个键被按下

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>

keypress:某个键盘的键被按下或按住

2. 当前鼠标的光标坐标是多少

使用方法:

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>在此文档中按下你鼠标的左键看看!</p>
</body>
</html>
$(document).keyup(function(event){ 
       switch(event.keyCode) { 
       case 27: 
       alert('您按下了回车'); 
       return; 
       case 13: 
       alert('您按下了空格'); 
       return; 

       } 
 }); 

3. 被按下键的unicode码是多少

小总结:总体来说,这两种方式达到的效果都是一样的,只是由于jquery的获取对象更加简单,所以一般更推介使用jquery,当然,如果你有jquery基础的话。

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

以上就是小编为大家带来的js监听键盘事件的方法_原生和jquery的区别详解全部内容了,希望大家多多支持脚本之家~

4. 当前鼠标的光标相对于屏幕的坐标是多少

您可能感兴趣的文章:

  • js和jquery实现监听键盘事件示例代码
  • 不要使用jQuery触发原生事件的方法
  • js事件监听机制(事件捕获)总结
<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

5. 当前鼠标的光标坐标是多少

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

6. shift键是否按下

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>按下shit键,点击你鼠标的左键</p>
</body>
</html>

7. 当前被点击的是哪一个元素

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("你点击了 " + tname + "元素")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在这里点击看看,这里是p</p>
<h3>或者点击这里也可以呀,这里是h3</h3>
<p>你想点我吗??</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body>
</html>

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript窗口操作与技巧汇总》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

  • js捕捉键盘事件和按键键值的方法
  • js和jquery实现监听键盘事件示例代码
  • js获取及判断键盘按键的方法
  • JS实现自定义简单网页软键盘效果代码
  • JavaScript获取键盘按键的键码(参照表)