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

一尘不染

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

javascript

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

我正在使用jQuery来添加它们：

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

它也可以input代替一起使用change。

相对于焦点，事件顺序可能有所不同吗？

阅读 645

2020-05-01

共1个答案

一尘不染

oninput 通过用户界面更改元素的文本内容时发生事件。
onchange 当选择，选中状态或元素的内容 发生更改时发生 。在某些情况下，仅当元素失去焦点或按return（Enter）并且值已更改时才会发生。该onchange属性可以使用：<input>，<select>，和<textarea>。

TL; DR：

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>

2020-05-01