键盘事件
最后更新于：2022-04-02 03:26:23
[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 键
';