键盘事件包含四个 ：
keydown用户按下键盘某个键触发keypress用户按下键盘并输入或回退某个字符触发， 在DOM3 被textInput替代keyup用户抬起键盘某个键的时候触发textInput用户在编辑区域中输入字符时触发，只有新增会触发
对于键盘事件来说，会返回一个 keyCode 表示用户输入键值对应的 ASCII 值，用来确定用户按下的是哪个键，不区分大小写
注意，缺乏浏览器的广泛支持，不推荐用。 各浏览器厂家也有自己的看法，你规定你的，我不一定用，哈哈
DOM3 改变了下 keyCode 的方式， 用键盘事件的 key 值表示原先的 keyCode， 用char 在输入非字符键时是null，其他情况和 key一样
说实话，鸡肋的设计，直接非字符键用字符串表示，字符键用阿斯特码的数字值表示就行了呗
还有个 location 属性，也没得到广泛支持，本身也比较鸡肋，返回值表示按的是键盘左边的键还是右边的(例如 Alt， Shift)
这个事件还是比较有用的，DOM3 要用它去替代原先的 keypress事件。相较于 keypress 事件,它有以下特点：
- 只在编辑区域触发。
keypress会在任何获得焦点的地方触发 - 只在新增字符时。
keypress在任何对文本产生影响的键都会触发
这个事件的 event 还有一个叫做 inputMethod 的属性，表示输入文本的来源，个人觉得这个是有用的，例如禁用用户粘贴等。
可能的值如下：
- 0， 未知来源
- 1，表示键盘
- 2，表示粘贴
- 3，表示拖放
- 4，IME
- 5，表单选项
- 6，手写设备
- 7，语音输入
- 8，组合方式
- 9，脚本
HTML5 详尽的列出了浏览器支持的所有事件，这节会讨论得到浏览器广泛支持的一些事件
contextmenu 事件用来表示何时展示上下文菜单（右键浏览器的菜单），可以设置以展示开发者自定义的菜单。
在现代浏览器上，通过 event.preventDefault() 阻止右键点击菜单的出现的默认菜单事件，然后展示自定义菜单，例如一个在线表格，你就需要用这个事件在单元格上改变成操作表格的右键菜单。 具体用法示例：
div.addEventListener("contextmenu", (e) => {
e.preventDefault();
let menu = document.getElementById("menu");
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.visible = 'visible';
});这个事件会在 window 上触发，是给开发者提供阻止页面被卸载的机会，具体场景例如关闭标签页的时候，出一个弹框提示："页面更改未保存，确定要关闭标签页吗？" 具体用法:
window.addEvnetLister('beforeunload', (event) => {
let msg = '页面更改未保存，确定要关闭标签页吗？'
event.returnValue = msg; // IE和火狐
return msg // 谷歌和Safari
})会在 DOM 树构建完成后立即出发，不用等待图片、 JavaScript 的加载，永远在 load 事件之前触发
document.addEvnetLister('DOMContentLoaded', (event) => {
...
})它的 event 不会包含任何多余属性， target 等于 document
pageshow事件会在页面显示的时候触发，并且会返回是否来自于往返缓存的 persisted 布尔值属性
// 尽管事件目标是 document , 但是事件必须绑定在 window 上(currentTarget 是 window)
(function () {
// 这样可以保存一个变量计数，表示页面加载次数
let showCount = 0;
window.addEvnetLister('pageshow', (event) => {
showCount++;
console.log(event.persisted) // true 表示来自缓存，false表示不是
})
})()上面的例子中，如果只是回退前进页面，可以正常计数，如果刷新或关闭标签页会清零
pagehide 用法和 pageshow 相同，会在页面卸载的时候触发，它的persisted 布尔值属性表示是否将页面缓存成功