输入元素的“更改”和“输入”事件之间的区别是什么?

Can someone tell me what the difference between the change and input events is?

有人能告诉我更改和输入事件之间的区别吗?

I am using jQuery for adding them:

我正在使用jQuery添加它们:

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

It also works with input instead of change.

它也适用于输入而不是更改。

Maybe some difference in the event ordering relative to focus?

也许事件排序与焦点有什么不同?

2 个解决方案

#1

According to this post:

根据这篇文章:

oninput event occurs when the text content of an element is changed through the user interface.

oninput事件发生在通过用户界面更改元素的文本内容时。
onchange occurs 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. The onchange attribute can be used with: <input>, <select>, and <textarea>.

当选择、检查状态或元素的内容发生更改时发生onchange。在某些情况下，它只在元素失去焦点时发生。可以使用onchange属性:，。</p>

TL;DR:

TL;博士:

oninput: any change made in the text content
oninput:文本内容中的任何更改
onchange:
- If it is an <input />: change + lose focus
- 如果它是 <输入 />:change +失去焦点。
- If it is a <select>: change option
- 如果是
onchange:如果是: change + lose focus，如果是

$("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>

#2

The change event fires in most browsers when content is changed and the element loses focus, basically an aggregate of changes. You will not see this fired for every single changed unlike the input event.

在大多数浏览器中，当内容发生更改，元素失去焦点(基本上是更改的集合)时，都会触发更改事件。与输入事件不同，您不会看到每一个更改都触发此事件。
The input event fires synchronously on change of the content for the element. So you will see this event occur more often. Browser support varies.

输入事件以同步方式触发元素的内容更改。所以你会看到这个事件发生得更频繁。不同的浏览器支持。

#1