键盘事件包含四个 :
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
布尔值属性表示是否将页面缓存成功