微信扫一扫打赏支持

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

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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10         input{width: 100px;height: 30px;}
11         div{width: 100px;height: 100px;border:1px solid green;}
12       </style>
13 </style>
14 </head>
15 <body>
16 <h3>jQuery事件对象</h3>
17 <div id="div1"><p id="pid"></p></div>
18 <input id="btn1" type="button" value="事件对象">
19 <script type="text/javascript">
20     $(function(){
21         $(document).click(function(e){
22             alert(e.timeStamp)
23             var time=new Date(e.timeStamp)
24             alert(time.toLocaleString())
25         })
26         
27         $(document).mousedown(function(e){
28             alert(e.which)
29         })
30         
31         $(document).keydown(function(e){
32             alert(e.which)
33         })
34 
35         //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装)
36         $(document).mousedown(function(e){
37             alert(e.shiftKey)
38         })
39     })
40 </script>
41 </body>
42 </html>

 

 

 
posted @ 2018-07-06 14:48  范仁义  阅读(681)  评论(0)  编辑  收藏  举报