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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

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

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

回答：

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

  • 当选择，选中状态或元素的内容 。在某些情况下，仅当元素失去焦点或按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>

以上是 “ input”元素的“ change”事件与“ input”事件之间的区别 的全部内容， 来源链接： utcz.com/qa/421561.html

回到顶部