input/change/composition/keydown事件详解

- 日理万妓 2023-03-04 15:23 41阅读 0赞

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

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`组成的复合事件。会在`输入法编辑器`输入时触发。

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

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

![format_png][]

如上图，输入数字并不会触发`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`，并最终输出`我`时，事件触发顺序如图：

![format_png 1][]

[format_png]: /images/20230208/af64b13fa60d43dd954eebb0b4e8bcd5.png
[format_png 1]: /images/20230208/94abd7302cbb49e9b42700e5816e28c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 js事件冒泡和事件捕获详解

avascript与HTML之间的交互是通过事件实现。一、事件流事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE...

女爷i/ 2024年04月17日 06:03/ 0 赞/ 170 阅读

相关 MySQL-事件详解

> ♥️作者：小刘在C站 > > ♥️个人主页：[小刘主页][Link 1] > > ♥️每天分享云计算网络运维课堂笔记，努力不一定有回报，但一定会有收获加油！一起努力，共

Bertha 。/ 2023年10月11日 22:53/ 0 赞/ 36 阅读

相关事件处理详解

前言　　本文大概整理下绑定事件的几种方式，兼容IE8- 的方式（如果需要的话），事件委托，阻止传播，取消默认行为，event对象等。　　之前做的多是手机端页面，监听

ゝ一纸荒年。/ 2023年06月11日 03:22/ 0 赞/ 99 阅读

相关 nodejs事件和事件循环详解

文章目录简介 nodejs中的事件循环 phase详解 timers pending callbacks id

布满荆棘的人生/ 2023年01月06日 11:56/ 0 赞/ 380 阅读

相关事件循环机制详解

事件循环机制 1. 单线程与多线程单线程多线程 2. 任务队列与事件循环机制单线程与多线程线程分为单线程和多线程

朴灿烈づ我的快乐病毒、/ 2022年10月26日 03:55/ 0 赞/ 311 阅读

相关 Mysql事件详解

在系统管理或者数据库管理中，经常要周期性的执行某一个命令或者SQL语句。对于linux系统熟悉的人都知道linux的cron计划任务，能很方便地实现定期运行指定命令的功能。My

骑猪看日落/ 2022年08月09日 05:07/ 0 赞/ 266 阅读

相关详解事件和委托

委托委托实质上是一个类，是对方法/函数的封装，是一种引用方法的类型，可以当作给方法的特定特征指定一个名称。委托内部有三个重要成员：目标，方法，前一个委托。一旦为委托分配

ゝ一纸荒年。/ 2022年07月28日 01:08/ 0 赞/ 315 阅读

相关 Android输入事件详解

输入事件在 Android 系统中，从用户与应用的交互中截获事件的方法不止一种。如考虑截获用户界面内的事件，则可从用户与之交互的特定视图对象中捕获事件。为此，View

深碍√TFBOYSˉ_/ 2022年07月14日 07:21/ 0 赞/ 218 阅读

相关原生JavaScript事件详解

DOM0事件模型事件模型在不断发展，早期的事件模型称为DOM0级别。 DOM0事件模型，所有的浏览器都支持。直接在dom对象上注册

今天药忘吃喽~/ 2022年06月17日 07:50/ 0 赞/ 252 阅读

相关 jQuery详解之事件

这篇的总结是我在看了jQuery的中文文档后写出来的，如果需要查看更详细的细节，请查看[https://www.jquery123.com/][https_www.jquery

Bertha 。/ 2022年04月08日 08:17/ 0 赞/ 337 阅读