“输入”元素的“更改”和“输入”事件之间的差异

javascript dom jquery events

2022-08-30 02:31:20

有人能告诉我和事件之间的区别是什么吗？changeinput

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

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

它也可以代替。inputchange

也许事件顺序相对于焦点有一些差异？

答案 1

根据这篇文章：

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

TL;DR：

oninput：对文本内容所做的任何更改
更改：
- 如果是：更改+失去焦点<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>

答案 2

在大多数浏览器中，当内容发生更改且元素丢失时，将触发。它基本上是变化的集合。它不会像在每次更改时都触发，例如在这种情况下。changeeventfocusinputevent
在更改元素的内容时同步触发。因此，事件侦听器倾向于更频繁地触发。inputevent
不同的浏览器并不总是同意是否应为某些类型的交互触发更改事件