[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 键