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

Difference between "change" and "input" event for an `input` element

提问by Gabriel Petrovay

Can someone tell me what the difference between the changeand inputevents is?

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

I am using jQuery for adding them:

我正在使用 jQuery 添加它们：

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

It also works with inputinstead of change.

它也适用于input代替change。

Maybe some difference in the event ordering relative to focus?

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

回答by Ionic? Biz?u

According to this post:

根据这篇文章：

• oninputevent occurs when the text content of an element is changed through the user interface.

• onchangeoccurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus or when pressing return(Enter) and the value has been changed. The onchange attribute can be used with: <input>, <select>, and <textarea>.

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

• onchangeoccurs when the selection, the checked state or the contents of an element have changed. 在某些情况下，它仅在元素失去焦点或按下return(Enter) 且值已更改时发生。该onchange属性可以使用：<input>，<select>，和<textarea>。

TL;DR:

特尔；博士：

• oninput: any change made in the text content
• onchange:
  • If it is an <input />: change + lose focus
  • If it is a <select>: change option

• 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>

回答by Gabe

• The changeeventfires in most browsers when content is changed and the element loses focus. It's basically an aggregate of changes. It will not fire for every single change as in the case inputevent.

• The inputeventfires synchronously on change of the content for the element. As such, the event listener tends to fire more frequently.

• Different browsers do not always agree whether a change event should be fired for certain types of interaction

• 在changeevent大多数浏览器火灾时，内容变更和元素丢失focus。它基本上是变化的集合。它不会像这种情况那样为每一次更改触发inputevent。

• 在inputevent火上同步为元素的含量变化。因此，事件侦听器往往会更频繁地触发。

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

回答by Joel H

MDN documentation has a clear explanation (not sure when it was added):

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

The change event is fired for input, select, and textareaelements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

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

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

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