# 鍵盤事件 ## 鍵盤事件的種類 鍵盤事件由用戶擊打鍵盤觸發，主要有`keydown`、`keypress`、`keyup`三個事件，它們都繼承了`KeyboardEvent`接口。 - `keydown`：按下鍵盤時觸發。 - `keypress`：按下有值的鍵時觸發，即按下 Ctrl、Alt、Shift、Meta 這樣無值的鍵，這個事件不會觸發。對于有值的鍵，按下時先觸發`keydown`事件，再觸發這個事件。 - `keyup`：松開鍵盤時觸發該事件。 如果用戶一直按鍵不松開，就會連續觸發鍵盤事件，觸發的順序如下。 1. keydown 1. keypress 1. keydown 1. keypress 1. ...（重復以上過程） 1. keyup ## KeyboardEvent 接口概述 `KeyboardEvent`接口用來描述用戶與鍵盤的互動。這個接口繼承了`Event`接口，并且定義了自己的實例屬性和實例方法。 瀏覽器原生提供`KeyboardEvent`構造函數，用來新建鍵盤事件的實例。 ```javascript new KeyboardEvent(type, options) ``` `KeyboardEvent`構造函數接受兩個參數。第一個參數是字符串，表示事件類型；第二個參數是一個事件配置對象，該參數可選。除了`Event`接口提供的屬性，還可以配置以下字段，它們都是可選。 - `key`：字符串，當前按下的鍵，默認為空字符串。 - `code`：字符串，表示當前按下的鍵的字符串形式，默認為空字符串。 - `location`：整數，當前按下的鍵的位置，默認為`0`。 - `ctrlKey`：布爾值，是否按下 Ctrl 鍵，默認為`false`。 - `shiftKey`：布爾值，是否按下 Shift 鍵，默認為`false`。 - `altKey`：布爾值，是否按下 Alt 鍵，默認為`false`。 - `metaKey`：布爾值，是否按下 Meta 鍵，默認為`false`。 - `repeat`：布爾值，是否重復按鍵，默認為`false`。 ## KeyboardEvent 的實例屬性 ### KeyboardEvent.altKey，KeyboardEvent.ctrlKey，KeyboardEvent.metaKey，KeyboardEvent.shiftKey 以下屬性都是只讀屬性，返回一個布爾值，表示是否按下對應的鍵。 - `KeyboardEvent.altKey`：是否按下 Alt 鍵 - `KeyboardEvent.ctrlKey`：是否按下 Ctrl 鍵 - `KeyboardEvent.metaKey`：是否按下 meta 鍵（Mac 系統是一個四瓣的小花，Windows 系統是 windows 鍵） - `KeyboardEvent.shiftKey`：是否按下 Shift 鍵 下面是一個示例。 ```javascript function showChar(e) { console.log('ALT: ' + e.altKey); console.log('CTRL: ' + e.ctrlKey); console.log('Meta: ' + e.metaKey); console.log('Shift: ' + e.shiftKey); } document.body.addEventListener('keydown', showChar, false); ``` ### KeyboardEvent.code `KeyboardEvent.code`屬性返回一個字符串，表示當前按下的鍵的字符串形式。該屬性只讀。 下面是一些常用鍵的字符串形式，其他鍵請查[文檔](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values)。 - 數字鍵0 - 9：返回`digit0` - `digit9` - 字母鍵A - z：返回`KeyA` - `KeyZ` - 功能鍵F1 - F12：返回 `F1` - `F12` - 方向鍵：返回`ArrowDown`、`ArrowUp`、`ArrowLeft`、`ArrowRight` - Alt 鍵：返回`AltLeft`或`AltRight` - Shift 鍵：返回`ShiftLeft`或`ShiftRight` - Ctrl 鍵：返回`ControlLeft`或`ControlRight` ### KeyboardEvent.key `KeyboardEvent.key`屬性返回一個字符串，表示按下的鍵名。該屬性只讀。 如果按下的鍵代表可打印字符，則返回這個字符，比如數字、字母。 如果按下的鍵代表不可打印的特殊字符，則返回預定義的鍵值，比如 Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，NumLock，Scroll 等。 如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。比如，按下 Ctrl + a，則返回`a`；按下 Shift + a，則返回大寫的`A`。 如果無法識別鍵名，返回字符串`Unidentified`。 ### KeyboardEvent.location `KeyboardEvent.location`屬性返回一個整數，表示按下的鍵處在鍵盤的哪一個區域。它可能取以下值。 - 0：處在鍵盤的主區域，或者無法判斷處于哪一個區域。 - 1：處在鍵盤的左側，只適用那些有兩個位置的鍵（比如 Ctrl 和 Shift 鍵）。 - 2：處在鍵盤的右側，只適用那些有兩個位置的鍵（比如 Ctrl 和 Shift 鍵）。 - 3：處在數字小鍵盤。 ### KeyboardEvent.repeat `KeyboardEvent.repeat`返回一個布爾值，代表該鍵是否被按著不放，以便判斷是否重復這個鍵，即瀏覽器會持續觸發`keydown`和`keypress`事件，直到用戶松開手為止。 ## KeyboardEvent 的實例方法 ### KeyboardEvent.getModifierState() `KeyboardEvent.getModifierState()`方法返回一個布爾值，表示是否按下或激活指定的功能鍵。它的常用參數如下。 - `Alt`：Alt 鍵 - `CapsLock`：大寫鎖定鍵 - `Control`：Ctrl 鍵 - `Meta`：Meta 鍵 - `NumLock`：數字鍵盤開關鍵 - `Shift`：Shift 鍵 ```javascript if ( event.getModifierState('Control') + event.getModifierState('Alt') + event.getModifierState('Meta') > 1 ) { return; } ``` 上面代碼表示，只要`Control`、`Alt`、`Meta`里面，同時按下任意兩個或兩個以上的鍵就返回。