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

发布于06月11日

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

我使用jQuery添加它们:

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

它也适用于input而不是change.

Maybe some difference in the event ordering relative to focus?

推荐答案

According to this post:

100通过用户界面更改元素的文本内容时发生事件.
100在元素have changed的 Select 、选中状态或内容时发生.在某些情况下，只有当元素失go 焦点或按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

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