“input”元素的“change”和“input”事件之间的区别

Question

有人可以告诉我change和input事件之间有什么区别吗？

我正在使用jQuery添加它们：

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

它也适用于input而不是change。

相对于焦点，事件排序可能有些不同？

Answer 1

根据this post：

通过用户界面更改元素的文本内容时，会发生

• oninput 事件。

选择，已检查状态或元素的内容已更改时，会发生

• onchange 。在某些情况下，它仅在元素失去焦点时发生。 onchange属性可用于：<input>，<select>和<textarea>。

TL; DR：

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

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

<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

• 当内容发生变化时，change event会在大多数浏览器中触发 元素丢失focus，基本上是一组变化。与input event不同，您不会看到每次更改都会被解雇。

• input event会同时触发更改内容的内容 元件。所以你会看到这个事件更频繁地发生。浏览器支持各不相同。

Answer 3

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

根据MDN：

input，value或<input>元素的<select>被更改时，将触发<textarea>事件。

又名

input随时会触发 value发生变化。

change有点复杂：

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

换一种说法，

change在用户更改value时触发。

确切触发时间取决于type中的<input>：

对于...

• “收音机”和“复选框”：
  • 当元素为:checked时，可通过键盘或鼠标单击
• “日期”和“文件”：
  • 明确提交更改时，即。选择日期或文件
• “文字”：
  • 当元素的值更改后失去焦点但未提交

公平警告浏览器善变，并不总是就事件达成共识。但是，这确实是规范，并且您应该能够依靠这些时间安排。

Answer 4

MDN文档有明确的解释（不确定何时添加）：

  

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

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