[TOC] ## 鍵盤事件 `new KeyboardEvent(type, options) ` **參數一**: 主要有`keydown`、`keypress`、`keyup`三個事件 * `keydown`：按下鍵盤時觸發。 * `keypress`：按下有值的鍵時觸發，即按下 Ctrl、Alt、Shift、Meta 這樣無值的鍵，這個事件不會觸發。對于有值的鍵，按下時先觸發`keydown`事件，再觸發這個事件。 * `keyup`：松開鍵盤時觸發該事件。 **參數二** * `key`：字符串，當前按下的鍵，默認為空字符串。 * `code`：字符串，表示當前按下的鍵的字符串形式，默認為空字符串。 * `location`：整數，當前按下的鍵的位置，默認為`0`。 * `ctrlKey`：布爾值，是否按下 Ctrl 鍵，默認為`false`。 * `shiftKey`：布爾值，是否按下 Shift 鍵，默認為`false`。 * `altKey`：布爾值，是否按下 Alt 鍵，默認為`false`。 * `metaKey`：布爾值，是否按下 Meta 鍵，默認為`false`。 * `repeat`：布爾值，是否重復按鍵，默認為`false`。 * 用戶一直按鍵不松開 1. keydown 2. keypress 3. keydown 4. keypress 5. ...（重復以上過程） 6. keyup ### KeyboardEvent 的實例屬性 #### 監控功能鍵 ``` document.querySelector('body').addEventListener('keydown',function (e) { console.log(e.altKey);//只有按下alt 才返回true }) ``` * `KeyboardEvent.altKey`：是否按下 Alt 鍵 * `KeyboardEvent.ctrlKey`：是否按下 Ctrl 鍵 * `KeyboardEvent.metaKey`：是否按下 meta 鍵（Mac 系統是一個四瓣的小花，Windows 系統是 windows 鍵） * `KeyboardEvent.shiftKey`：是否按下 Shift 鍵 #### KeyboardEvent.code ``` document.querySelector('body').addEventListener('keydown',function (e) { console.log(e.code );//按D 返回KeyD }) ``` 其他鍵請查[文檔](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code#Code_values)。 * 數字鍵0 - 9：返回`digital0`\-`digital9` * 字母鍵A - z：返回`KeyA`\-`KeyZ` * 功能鍵F1 - F12：返回`F1`\-`F12` * 方向鍵：返回`ArrowDown`、`ArrowUp`、`ArrowLeft`、`ArrowRight` * Alt 鍵：返回`AltLeft`或`AltRight` * Shift 鍵：返回`ShiftLeft`或`ShiftRight` * Ctrl 鍵：返回`ControlLeft`或`ControlRight` #### KeyboardEvent.key ``` document.querySelector('body').addEventListener('keydown',function (e) { console.log(e.key );//按shift+d 返回D }) ``` 無法識別返回`Unidentified` #### KeyboardEvent.location ``` document.querySelector('body').addEventListener('keydown',function (e) { console.log(e.location );//按shift+d 返回D }) ``` #### KeyboardEvent.repeat 代表該鍵是否被按著不放，以便判斷是否重復這個鍵，即瀏覽器會持續觸發`keydown`和`keypress`事件，直到用戶松開手為止。 如果連續按著連續返回`true` ### 實例方法 #### KeyboardEvent.getModifierState() * `Alt`：Alt 鍵 * `CapsLock`：大寫鎖定鍵 * `Control`：Ctrl 鍵 * `Meta`：Meta 鍵 * `NumLock`：數字鍵盤開關鍵 * `Shift`：Shift 鍵