js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、总结

一句话总结：event.which属性。

1、如何获取事件发生的时间？

timeStamp属性

event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。

2、为什么推荐用 event.which 来监视键盘输入？

event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

3、鼠标的三个键对应的键值是什么？

1 2 3

event.which属性值	对应的鼠标按钮	1	鼠标左键	2	鼠标中键(滚轮键)	3	鼠标右键

4、0-9a-zA-Z对应的键值是什么？

他们对应的ascii码

5、非jQuery封装获取ctrl，alt，shift的键是什么？

35         //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装)

36         $(document).mousedown(function(e){

37             alert(e.shiftKey)

38         })

6、jquery的event对象中包含js的event的原生的方法么？

包含的，只不过对有一些进行了封装，因为jquery里面是完全可以执行js的，所以js原生方法属性都可以用

二、如何知道鼠标和键盘当前操作的是哪个键

1、相关知识

event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。

event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

在mousedownmouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。

event.which属性值	对应的鼠标按钮
1	鼠标左键
2	鼠标中键(滚轮键)
3	鼠标右键

在keydownkeyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。以下是常用的键盘按键映射代码的对应表：

which属性值(或范围)	对应的输入字符
48 - 57	对应字符 0 - 9
65 - 90	对应字符 A - Z
97 - 122	对应字符 a - z

which属性值(或范围)	对应的键盘按键
8	Backspace键
9	Tab键
13	Enter键
16	Shift键
17	Ctrl键
20	Alt键
20	Caps Lock键(大小写锁定)
27	Esc键
33 - 36	对应按键 PageUp、PageDown、End、Home
37 - 40	对应按键左、上、右、下(方向键)
45 - 46	对应按键 Insert、Delete
48 - 57	对应按键 0 - 9(非小键盘)
65 - 90	对应按键 A - Z
91	Windows键
96 - 105	对应按键 0 - 9(小键盘)
106、107、109、110、111	对应按键*、+、-、.、/(小键盘)
112 - 123	对应按键 F1 - F12

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         input{width: 100px;height: 30px;}

         div{width: 100px;height: 100px;border:1px solid green;}

       </style>

 </style>

 </head>

 <body>

 <h3>jQuery事件对象</h3>

 <div id="div1"><p id="pid"></p></div>

 <input id="btn1" type="button" value="事件对象">

 <script type="text/javascript">

     $(function(){

         $(document).click(function(e){

             alert(e.timeStamp)

             var time=new Date(e.timeStamp)

             alert(time.toLocaleString())

         })

         $(document).mousedown(function(e){

             alert(e.which)

         })

         $(document).keydown(function(e){

             alert(e.which)

         })

         //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装)

         $(document).mousedown(function(e){

             alert(e.shiftKey)

         })

     })

 </script>

 </body>

 </html>