`input` 元素的“更改”和“输入”事件之间的区别

Question

有人能告诉我change和input事件之间的区别是什么吗？

我正在使用 jQuery 添加它们：

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

它也适用于input而不是change 。

也许事件排序相对于焦点有一些不同？

Answer 1

根据这篇文章：

• 当通过用户界面更改元素的文本内容时，会发生oninput事件。

• 选择，选中状态或元素的内容已更改时发生onchange 。 在某些情况下，它仅在元素失去焦点或按下回车(Enter) 且值已更改时发生。 onchange 属性可用于： <input> 、 <select>和<textarea> 。

特尔；博士：

• oninput ：对文本内容所做的任何更改
• onchange ：
  • 如果是<input /> ：更改 + 失去焦点
  • 如果是<select> ：更改选项

 $("input, select").on("input", function () { $("pre").prepend("\\nOn input. | " + this.tagName + " | " + this.value); }).on("change", function () { $("pre").prepend("\\nOn change | " + this.tagName + " | " + this.value); }).on("focus", function () { $("pre").prepend("\\nOn focus | " + this.tagName + " | " + this.value); }).on("blur", function () { $("pre").prepend("\\nOn blur | " + this.tagName + " | " + this.value); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <select> <option>Alice</option> <option>Bob</option> <option>Carol</option> <option>Dave</option> <option>Emma</option> </select> <pre></pre>

Answer 2

• 当内容发生变化并且元素失去focus时，大多数浏览器都会触发change event 。 它基本上是变化的集合。 它不会像input event那样为每一个变化触发。

• input event在元素内容更改时同步触发。 因此，事件侦听器往往会更频繁地触发。

• 不同的浏览器并不总是同意是否应该为某些类型的交互触发更改事件

Answer 3

这两个事件之间最显着的区别是导致<input> value变化的原因。

根据MDN ：

所述input事件触发时所述value的的<input> ， <select>或<textarea>元件已被更改。

又名，

任何时候value改变时input触发。

change有点复杂：

当用户提交对元素value的更改时，将针对<input> 、 <select>和<textarea>元素触发change事件。 与input事件不同， change事件不一定会在每次更改元素value时触发。

换句话说，

当用户更改value时触发change 。

它何时触发取决于<input>的type ：

为了...

• “收音机”和“复选框”：
  • 当元素被:checked ，通过键盘或鼠标点击
• “日期”和“文件”：
  • 当显式提交更改时，即。 选择日期或文件
• “文本”：
  • 当元素在其值已更改但未提交后失去焦点时

公平警告，浏览器是善变的，并不总是在事件上达成一致。 然而，这确实是规范，您应该能够依靠这些时间。

Answer 4

MDN 文档有明确的解释（不确定是什么时候添加的）：

当用户提交对元素值的更改时，将针对input 、 select和textarea元素触发 change 事件。 与 input 事件不同，change 事件不一定会在每次更改元素值时触发。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Answer 5

似乎这个问题已经成为我不时访问的那些问题之一。 我不喜欢为简单的事情阅读文字墙。 所以我决定发布一个实用的答案。

使用以下演示，您可以检查触发了哪些事件以及以何种顺序触发。

 let eventsToListen = [ "focus", "blur", "input", "change", ]; let inputs = Array.from( document.querySelectorAll("#inputs :is(input, textarea, select)") ); inputs.forEach(input => { input.eventQueue = []; let queueLimit = eventsToListen.length * 2; let queueDisplay = input.closest("td").nextElementSibling; eventsToListen.forEach(event => { input.addEventListener(event, () => { input.eventQueue.push(event); if (input.eventQueue.length > queueLimit) { Array(input.eventQueue.length - queueLimit).fill(null).forEach( _ => input.eventQueue.shift() ); } queueDisplay.textContent = input.eventQueue.join(", "); }); }); });

 * { margin: 0; padding: 0; box-sizing: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } body { font-family: sans-serif; box-sizing: border-box; background-color: hsl(0, 0%, 90%); } #inputs { margin: 1em; } #inputs td { padding: 0.1em; } #inputs td:nth-child(2) :not(input[type=radio]):not(input[type=checkbox]) { width: 100%; } #inputs label { display: table; } #inputs td:last-child { font-style: italic; font-size: 0.8em; opacity: 0.7; padding-left: 1em; } #notices { margin: 1em; } #notices ul { padding-left: 2em; line-height: 2; } #notices > ul { margin-top: 0.5em; } input[type=radio]:focus, input[type=checkbox]:focus { transform: scale(1.5); }

 <table id="inputs"> <tr> <td>text</td> <td><input type="text" /></td> <td></td> </tr> <tr> <td>number</td> <td><input type="number" /></td> <td></td> </tr> <tr> <td>textarea</td> <td><textarea></textarea></td> <td></td> </tr> <tr> <td>select</td> <td> <select> <option>-</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </td> <td></td> </tr> <tr> <td rowspan="2">radio</td> <td> <label><input type="radio" name="something" /> Option 1</label> </td> <td></td> </tr> <tr> <td> <label><input type="radio" name="something" /> Option 2</label> </td> <td></td> </tr> <tr> <td style="padding-right: 0.5em">checkbox</td> <td> <label><input type="checkbox" name="something2" /> Option 1</label> </td> <td></td> </tr> </table> <hr> <div id="notices"> notice that: <ul> <li>"input" event can occur multiple times before a "change" event occurs on text/number/textarea</li> <li>"input" and "change" event seem to occur together/sequentially on select</li> <li>"input"/"change" event might occur multiple times before a "blur" event occurs on select <ul> <li>when arrow keys are used to select an option</li> </ul> </li> </ul> </div>