事件型別 鍵盤事件

2021-09-22 16:46:35 字數 2600 閱讀 4104

目錄

一、事件分類

二、事件物件

三、事件應用

鍵盤事件有三個，按觸發順序，其一keydown，其二keypress，其三keyup。

keydown按下任意鍵時觸發，若按住不放，會重複觸發該事件（觸發操作之間有500ms延遲）。事件偵聽器的繫結元素必須有焦點才能正常偵聽事件。
keypress鍵盤上的按鍵分為三類，分別是字元鍵、功能鍵和控制鍵。字元鍵是指能夠產生可見字元的鍵，包括26個字母鍵、數字鍵、標點符號鍵和空格鍵。功能鍵是指esc鍵和f1~f12鍵。keypress事件只有按下字元鍵或能夠影響文字顯示的鍵（如回車鍵）時才會觸發，按下功能鍵和控制鍵無響應。若按住字元鍵不放，會重複觸發keypress事件。事件偵聽器的繫結元素必須有焦點才能正常偵聽keypress事件。

按下esc鍵時，keypress事件在ie和火狐中能被觸發，在chrome、safari和opera等三個webkit核心的瀏覽器中不被觸發。document元素上繫結keypress事件處理程式時有相容問題，ie8及以下版本的瀏覽器不支援為document元素繫結keypress事件處理程式，ie9及以上版本的瀏覽器中只能為document元素繫結dom2級別的keypress事件處理程式。

按住字元鍵不放，會持續觸發keydown和keypress事件，觸發順序如下。

1、keydown


2、keypress


3、keydown


4、keypress


5、...


6、keyup
keyup釋放任意鍵時觸發。事件偵聽器的繫結元素必須有焦點才能正常偵聽keyup事件。
事件物件有三個常用屬性，其一keycode屬性，其二key屬性，其三修改鍵屬性。

keycode屬性

該屬性的返回結果是乙個數字即鍵碼，對應鍵盤上特定的鍵，具有唯一性。常用的四個方向鍵左上右下的鍵碼分別是37，38，39和40。firfox瀏覽器不支援keypress事件中的keycode屬性。keycode屬性不能區分字母的大小寫。
key屬性該屬性的返回結果是乙個字串。按下字元鍵時，返回結果是鍵對應的文字字元。按下功能鍵或控制鍵時，返回結果是鍵的名稱或空串。ie8及以下版本的瀏覽器不支援該屬性。safari瀏覽器不支援keypress事件中的key屬性。
相容全瀏覽器寫法，可以區分字母的大小寫。
修改鍵修改鍵有四個，分別是shift、ctrl、alt和windows鍵。每個修改鍵在事件物件中都有乙個對應屬性來表示它們的修改狀態，分別是shiftkey、ctrlkey、altkey和metakey屬性，這些屬性值都是布林型別，修改鍵被按下時對應屬性值為true，否則為false。ie8及以下版本的瀏覽器不支援metakey屬性。
過濾輸入

只能輸入數字
監聽全域性回車事件
監聽指定元素的回車按下事件

監聽組合鍵keypress事件只能捕獲單個字元，keydown和keyup事件可以捕獲組合鍵。

輸入框事件監聽

輸入事件流如上圖所示。其中focus為獲取焦點事件，input為輸入框輸入事件（修改輸入框的值同步觸發input事件），change為值改變事件（修改輸入框的值並且輸入框即將失去焦點時觸發），blur為失去焦點事件。

如上**所示，focus、keydown、keypress三個事件獲取不到輸入框最新輸入的值。

DOM 事件（鍵盤事件）

onkeydown 事件會在使用者按下乙個鍵盤按鍵時發生。onkeydown onkeypress onkeyup onkeydown事件在很多小遊戲上應用較多，比如需要控制上下左右的很多遊戲，如2048，貪吃蛇，俄羅斯方塊等等。keydown function bind this 然後就可以通過鍵...

Dom事件鍵盤事件

dom0級事件元素繫結多個 click 最後只執行最後乙個 click dom2級事件元素繫結多個 click 都要執行 注意當繫結的多個事件名，函式名，事件發生階段三者完全一樣時，才執行最後乙個 div.addeventlistener click fn1,false div.addeventli...

Dom事件鍵盤事件

dom0級事件元素繫結多個 click 最後只執行最後乙個 click dom2級事件元素繫結多個 click 都要執行 注意當繫結的多個事件名，函式名，事件發生階段三者完全一樣時，才執行最後乙個 div.addeventlistener click fn1,false div.addeventli...