事件类型键盘事件

类型

键盘事件用来描述键盘行为，主要有keydown、keypress、keyup三个事件

keydown   当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发该事件
keyup     当用户释放键盘上任意键时触发
keypress  当用户按下键盘上的字符键时触发，按下功能键时不触发。如果按住不放的话，会重复触发该事件

注意：

1. 键盘事件必须绑定在可以获得焦点的元素上，页面刚加载完成时，焦点处于document元素。
2. 系统为了防止按键误被连续按下，第一次触发keydown事件后，会有500ms的延迟，才会触发第二次keydown事件。keypress事件也存在500ms的时间间隔
3. 被系统占用的按键不会触发键盘事件，比如亮度调节、音量调节，另外如果浏览器安装了“快捷键”相关的插件，自定义的键盘事件也会被覆盖掉

顺序

如果用户一直按键不松开，就会连续触发键盘事件，顺序如下

keydown
keypress
keydown
keypress
...
keyup

按键信息

键盘事件包括keyCode、key、char、keyIdentifier和修改键共5个按键信息

keyCode

触发键盘事件时，事件对象的keyCode属性会包含一个代码

document.onkeydown = function(e) {
  console.log(e.keyCode)
}

具体键值可移步于此

key

触发键盘事件时，key属性会包含一个字符串。如果按下的是字符键，key值就是相应的文本字符；如果不是字符键，key值就是相应的键名

document.onkeydown = function(e) {
  console.log(e.key)
}

修改键

修改键指的是Shift、Ctrl、Alt和Meta(Meta在Windows键盘中是windows键，在苹果机中是command键)。DOM规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为true；否则值为false

document.onkeyup = function(e) {
  if(e.shiftKey){console.log('shiftKey')}
  if(e.ctrlKey){console.log('ctrlKey')}
  if(e.altKey){console.log('altKey')}
  if(e.metaKey){console.log('metaKey')}
}