事件类型—键盘事件

目录

一、事件分类

二、事件对象

三、事件应用

---

一、事件分类

键盘事件有三个，按触发顺序，其一keydown，其二keypress，其三keyup。

keydown

按下任意键时触发，若按住不放，会重复触发该事件（触发操作之间有500ms延迟）。事件侦听器的绑定元素必须有焦点才能正常侦听事件。

keypress

键盘上的按键分为三类，分别是字符键、功能键和控制键。字符键是指能够产生可见字符的键，包括26个字母键、数字键、标点符号键和空格键。功能键是指Esc键和F1~F12键。keypress事件只有按下字符键或能够影响文本显示的键（如回车键）时才会触发，按下功能键和控制键无响应。若按住字符键不放，会重复触发keypress事件。事件侦听器的绑定元素必须有焦点才能正常侦听keypress事件。

按下Esc键时，keypress事件在ie和火狐中能被触发，在chrome、safari和opera等三个webkit内核的浏览器中不被触发。document元素上绑定keypress事件处理程序时有兼容问题，ie8及以下版本的浏览器不支持为document元素绑定keypress事件处理程序，ie9及以上版本的浏览器中只能为document元素绑定dom2级别的keypress事件处理程序。

按住字符键不放，会持续触发keydown和keypress事件，触发顺序如下。

1、keydown
2、keypress
3、keydown
4、keypress
5、...
6、keyup

keyup

释放任意键时触发。事件侦听器的绑定元素必须有焦点才能正常侦听keyup事件。

二、事件对象

事件对象有三个常用属性，其一keyCode属性，其二key属性，其三修改键属性。

keyCode属性

该属性的返回结果是一个数字即键码，对应键盘上特定的键，具有唯一性。常用的四个方向键左上右下的键码分别是37，38，39和40。firfox浏览器不支持keypress事件中的keyCode属性。keyCode属性不能区分字母的大小写。

key属性

该属性的返回结果是一个字符串。按下字符键时，返回结果是键对应的文本字符。按下功能键或控制键时，返回结果是键的名称或空串。ie8及以下版本的浏览器不支持该属性。safari浏览器不支持keypress事件中的key属性。

兼容全浏览器写法，可以区分字母的大小写。

修改键

修改键有四个，分别是Shift、Ctrl、Alt和Windows键。每个修改键在事件对象中都有一个对应属性来表示它们的修改状态，分别是shiftKey、ctrlKey、altKey和metaKey属性，这些属性值都是布尔类型，修改键被按下时对应属性值为true，否则为false。ie8及以下版本的浏览器不支持metaKey属性。

三、事件应用

过滤输入

只能输入数字

监听全局回车事件

监听指定元素的回车按下事件

监听组合键

keypress事件只能捕获单个字符，keydown和keyup事件可以捕获组合键。

输入框事件监听

输入事件流如上图所示。其中focus为获取焦点事件，input为输入框输入事件（修改输入框的值同步触发input事件），change为值改变事件（修改输入框的值并且输入框即将失去焦点时触发），blur为失去焦点事件。

如上代码所示，focus、keydown、keypress三个事件获取不到输入框最新输入的值。