区分 HTMLElement的两个表单事件 input 和 change 事件

Aphorism

Grow In Errors!

input事件

The DOM input event is fired synchronously when the value of an , , or element is changed. For input elements with type=checkbox or type=radio, the input event should fire when a user toggles the control (via touch, mouse or keyboard) per the HTML5 specification

Additionally, the input event fires on a contenteditable editor when its contents are changed. In this case, the event target is the editing host element. If there are two or more elements which have contenteditable as true, “editing host” is the nearest ancestor element whose parent isn’t editable. Similarly, it’s also fired on root element of designMode editors.

input 事件在 input ,select , textarea 元素的值 改变的时候 同步触发

vue 中的 v-model 就是利用了该事件

change 事件

The change event is used by the HTML DOM API in two scenarios:

It’s fired for , , and elements when a change to the element’s value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element’s value.

It’s fired at AudioTrackList, VideoTrackList, and TextTrackList objects when one or more of the object’s tracks are enabled or disabled.

change 事件在用户 提交 元素值的改变 的时候被触发，并不是元素值改变就触发，需要提交本次的改变

元素 失去焦点的时候 视为一次提交

supplement

本本框输入的时候可能会使用的到的其他事件

1、compositionstart:官方解释，触发于一段文字的输入之前，也就是在输入一段需要的文本（第一个字母开始）或语音开始输入时会触发。
2、compositionupdate访问data：正插入的新字符；
3、compositionend访问data：插入的所有字符；