input/change/composition/keydown事件详解

你知道这些事件都在什么时候触发么？

30秒速答：

input事件在用户行为导致input | select | textarea的value改变时触发。

change事件在用户行为导致input | select | textarea的value改变 && (失去焦点 || 回车)时触发。

composition事件在输入法编辑器输入字符后触发。

keydown事件在按下键盘按键后触发。

扩展阅读

详细介绍各个事件的不同。

input

input是理想的文本内容变化监听事件，可以在内容改变后实时触发。

IE9以下浏览器不支持input事件，可以使用IE特有的propertychange事件替代。

这两个事件的区别为：

• input事件仅在用户输入导致value属性变化时触发，通过js改变属性无法触发。
• propertychange事件当任何属性改变都会触发。

change

change事件触发时机根据表单元素type与用户交互决定。

• 对于type为radio | checkbox的input，当元素:checked时触发（通过点击或者使用键盘）
• 对于需要选择的表单元素，当用户完成提交时触发，例如：

1. 点击select中的选项。
2. 从input[type="date"]选择了一个日期。
3. 通过input[type="file"]上传了一个文件。

• 对于textarea或者input[type="text"]，当文本内容变化 && (失去焦点 || 回车)时触发。

React中的onChange事件行为同原生的input事件相同

composition

由compositionstart、compositionupdate、compositionend组成的复合事件。会在输入法编辑器输入时触发。

对于中文来说，即从输入字母出现中文输入法到输出中文的过程。

这三个事件分别会在输入法输入时/输入中/输入完成触发。

如上图，输入数字并不会触发composition，有输入法编辑器时才会触发。

keydown

从按钮按下到弹起，会依次触发keydown、keypress、keyup事件。

• 其中keydown会在按下任意字符后触发，keyup会在按键弹起后触发（chrome下中/英切换按钮弹起不会触发keyup）。
• keypress会在按下可显示内容（数字/字母/符号）后在keydown之后触发。shift | meta等不会产生实际内容的按钮不会触发keypress。

keypress事件已经不被推荐使用，可以使用beforeinput替代。

事件触发顺序

对于input[type="text"]当没有输入中文时，事件触发顺序为：

1. keydown
2. keypress
3. beforeinput
4. input
5. keyup
6. 失去焦点 change

当使用输入法输入w，并最终输出我时，事件触发顺序如图：