ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 这次讲讲键盘事件，如有不足之处，欢迎指出！
键盘事件一共有仨
onkeydown: 键盘按下时触发，返回键盘的代码值(不区分大小写)
onkeypress ： 键盘按下触发，返回当前输入的ASCII码的值（区分大小写）
onkeyup: 键盘抬起时触发，获取的内容与onkeydown一样。
PS：需要注意的是onkeydown与onkeypress有着很大的一个区别就是onkeypress只能获取能获得输入的按键的编码，无法获取f1–f12 esc back ctrl shift ↑ ← ↓ → ind del end home pgUp pgDn tab CapsLK等等功能按钮的输入,而onkeydown可以，也可以获取其keyCode。
触发键盘事件非常简单
document.onkeydown = (e) => {
console.log(e);
}
document.addEventListener('keydown', (e) => {
console.log(e);
})
<input type="text" class="inp" onkeydown="doKey(event)" />
但是有一个限制，就是可以被聚焦的元素才可以触发按钮事件。(input button body textarea…)，至于什么是可以被聚焦的元素，具体可以看看我的这篇博客 友情链接
接下来我们来介绍一下这个event里面的一些关键属性—
通过键盘获取的事件对象它的原型是KeyboardEvent
document.onkeydown = (e) => {
console.log(e.__proto__);
}
| 属性 | 效果 |
|---|---|
| isTrusted | 事件是否可信，换而言之，该事件是否由用户触发，如果不是就是false,反之就是true(可能是程序脚本) |
| key | 触发事件的按键名 |
| code | 键盘上的物理键和key在一些按键上有些许差别 |
| location | 表示按键在键盘或其他设备上的位置，它可以把同样输入效果的多个按键区分开来，一般键盘左边的按键location都是0，右边小键盘的按键location都是3，然后左边shift的location是1，右边shift的location是2，这同理于Alt与Ctrl |
| ctrlKey | 布尔值，当前是否按下ctrl |
| shiftKey | 布尔值，当前是否按下shift |
| altKey | 布尔值，当前是否按下alt |
| metaKey | 布尔值，当前是否按下meta，（其实就是win按钮，如果在MAC键盘上，表示 Command 键 |
| repeat | 布尔值，如果因为键盘一直长按而触发此事件的为true,反之为false |
| isComposing | 布尔值，当文本合成系统（例如输入法编辑器启动新的合成会话时，将触发该事件，变成true。例如，在用户开始使用搜狗输入法输入中文字符后，可能会触发此事件。 |
| charCode | 返回Number， 它与onkeypress方法搭配，返回事件触发时按下的字符键的字符ASCII值。如果由其他事件触发的话返回0 |
| keyCode | 如果由onkeydown onkeyup 触发，返回键盘代码值，如果由onkeypress触发，返回键盘的ASCII值 |
| view | 获取当前的Window信息 |
| which | 过时属性，不建议使用，KeyboardEvent返回所keyCode按键的数字，或所charCode按字母数字键的字符代码（）。 |
| sourceCapabilities | 只读属性返回的一个实例InputDeviceCapabilities，其提供了关于负责产生的触摸事件，物理装置信息的接口。如果没有输入设备负责该事件，则返回 null。 |
| type | 触发此event的事件名，比如 keydown keyup keypress |
| target | 派发此事件的DOM元素 |
| currentTarget | 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。 |
| bubbles | 布尔值，bubbles 事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。 |
| defaultPrevented | 布尔值，是否屏蔽当前按键的默认事件 |
| composed | 事件是否会触发shadow DOM（阴影DOM）根节点之外的事件监听器，传递一个boolean类型的参数，默认值为false。 |
| timeStamp | 当前时间戳 |
| srcElement | 派发此事件的DOM元素(用于兼容IE) |
| returnValue | 布尔值，是否选择屏蔽当前按键的输入(true为不屏蔽，false屏蔽) |
| cancelBubble | 布尔值，是否阻止冒泡 |
| path | 在当前树结构向上冒泡的路径 |
然后就是大家最关心的keyCode的事情了
图片来源 https://www.cnblogs.com/daysme/p/6272570.html
总结
在开发网页的时候最好结合这个案件事件来完成一些事件以提高用户体验，快捷键还是很重要的！在H5小游戏中键盘事件更是重中之重！还有一点，就是注册事件之后，不使用了之后记得关掉