小编典典

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

javascript

有人可以告诉我changeinput事件之间的区别是什么?

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

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

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

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


阅读 690

收藏
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