js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键
生活随笔
收集整理的這篇文章主要介紹了
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
| 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)。以下是主要的鼠標按鈕映射代碼對應表。
| 1 | 鼠標左鍵 |
| 2 | 鼠標中鍵(滾輪鍵) |
| 3 | 鼠標右鍵 |
在keydownkeyup事件中，event.which屬性返回的是對應按鍵的映射代碼值(相當于event.keyCode)。以下是常用的鍵盤按鍵映射代碼的對應表：
| 48 - 57 | 對應字符 0 - 9 |
| 65 - 90 | 對應字符 A - Z |
| 97 - 122 | 對應字符 a - z |
| 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>?
?
總結
以上是生活随笔為你收集整理的js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分享一个外星人蓝屏的问题解决方法
- 下一篇： DHCP中继代理；DHCP突破vlan限