105_键盘事件对象
1. 當發生keydown、keypress和 keyup事件時, 它們的執行函數都會傳遞KeyboardEvent(鍵盤事件對象)參數。
2. KeyboardEvent.ctrlKey事件屬性
2.1.?KeyboardEvent.ctrlKey指示當事件發生時, Ctrl鍵是否被按下并保持住。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。
3. KeyboardEvent.altKey事件屬性
3.1.?KeyboardEvent.altKey指示在指定的事件發生時, Alt鍵是否被按下并保持住了。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。
4. KeyboardEvent.shiftKey事件屬性
4.1.?KeyboardEvent.shiftKey指示當事件發生時, "Shift"鍵是否被按下并保持住。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。
5. KeyboardEvent.metaKey事件屬性
5.1.?KeyboardEvent.metaKey指示當事件發生時, "meta"鍵是否被按下并保持住。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。
6. KeyboardEvent.repeat事件屬性
6.1.?KeyboardEvent.repeat是一個只讀屬性, 返回一個布爾值Boolean, 如果按鍵被一直按住, 返回值為true。
7. KeyboardEvent.code事件屬性
7.1.?KeyboardEvent.code是一個只讀屬性, 表示鍵盤上的物理鍵, 此屬性返回一個String類型的值(鍵盤上的每一個鍵都有唯一的code值), 該值不會被鍵盤布局或修飾鍵的狀態改變。
8. KeyboardEvent.key事件屬性
8.1.?KeyboardEvent.key是一個只讀屬性, 返回用戶按下的物理按鍵的值。它還與shiftKey等調節性按鍵的狀態和鍵盤布局有關。?
9. 例子
9.1.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>鍵盤事件對象(KeyboardEvent)</title></head><body><p>請按下鍵盤上的任意鍵: <br /></p><script type="text/javascript">var myP = document.querySelector("p");// 這里添加事件去掉on前綴document.body.addEventListener("keydown", mykeydown, false);document.body.addEventListener("keypress", mykeypress, false);document.body.addEventListener("keyup", mykeyup, false);function mykeydown(e){ // e是KeyboardEvent對象myP.innerHTML += ("onkeydown [ctrlKey: " + e.ctrlKey + ", altKey: " + e.altKey + ", shiftKey: " + e.shiftKey + ", metaKey: " + e.metaKey + ", repeat: " + e.repeat + ", code: " + e.code + ", key: " + e.key + "<br />");}function mykeypress(e){ // e是KeyboardEvent對象myP.innerHTML += ("onkeypress [ctrlKey: " + e.ctrlKey + ", altKey: " + e.altKey + ", shiftKey: " + e.shiftKey + ", metaKey: " + e.metaKey + ", repeat: " + e.repeat + ", code: " + e.code + ", key: " + e.key + "<br />");}function mykeyup(e){ // e是KeyboardEvent對象myP.innerHTML += ("onkeyup [ctrlKey: " + e.ctrlKey + ", altKey: " + e.altKey + ", shiftKey: " + e.shiftKey + ", metaKey: " + e.metaKey + ", repeat: " + e.repeat + ", code: " + e.code + ", key: " + e.key + "<br />");}</script></body> </html>9.2.?效果圖
總結
以上是生活随笔為你收集整理的105_键盘事件对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 104_鼠标事件对象
- 下一篇： 093_Element.getBound