按键按下事件_详细说说JavaScript 键盘事件keydown、keypress、keyup

浏览器的按键事件

我们先从浏览器按键时间说起，

用JavaScript实现键盘记录，要关注浏览器的三种按键事件类型，

• keydown
• keypress
• keyup

它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。

KeyDown：在控件有焦点的情况下按下键时发生。

KeyPress：在控件有焦点的情况下按下键时发生。

KeyUp：在控件有焦点的情况下释放键时发生。

在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。

但是keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress事件的。

传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下，这通过事件的altKey、ctrlKey和shiftKey属性表示，这些属性在FireFox和IE中是通用的。

注意:

KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。

KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母(注意：包括大小写)、小键盘等 除了 F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键 外的ANSI字符

KeyPress 只能捕获单个字符,可以捕获单个字符的大小写,不区分小键盘和主键盘的数字字符。

KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn(截屏)所有按键

KeyDown 和KeyUp 可以捕获组合键,对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写,区分小键盘和主键盘的数字字符。

其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

keydown、keypress 按着不动会持续执行事件，keyup执行一次

在使用键盘的时候，通常会使用到CTRL+SHIFT+ALT 类似的组合键功能,通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown，因为在判定KeyDown的时候，CTRL、SHIFT和ALT 属于一直按下状态，然后再加另外一个键是不能准确捕获组合键，所以使用KeyDown 是不能准确判断出的，要通过KeyUp 事件来判定 )

前端架构暴力拆解，源码解析，多年经验分享，请持续关注！