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>