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

108

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

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

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

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

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

— 加布里埃尔·彼得罗维（Gabriel Petrovay）
source

rakshasingh.weebly.com/1/post/2012/12/… 请注意，旧版浏览器不支持oninput。然后可以使用：onchange，onpaste和onkeyup作为解决方法。PS：oninput事件在IE9中也是错误的，删除时不会触发。

— A. Wolff

输入触发的频率更高，例如在按键后触发，而更改基本上是在输入模糊时触发的，并且值与输入聚焦时的值不同。

— dandavis

该input事件还捕获粘贴。见stackoverflow.com/questions/15727324/…–

— 安东尼

TLDR：输入触发输入文字时，改变火当你点击外面

— 穆罕默德乌默尔

Answers:

117

根据这篇文章：

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>

展开摘要

— 爱奥尼亚比乌
source

我仍然不清楚两者之间的区别。从您的描述来看，它们听起来非常相似。

— 贾斯汀·摩根

@JustinMorgan就像在JSFiddle示例中一样，onchange发生在“元素失去焦点时”，而oninput发生在每次文本更改时。

— 尼卡比曹

区别在于oninput事件在元素的值更改后立即发生，而onchange事件在元素的内容更改后失去焦点时发生。

— NinoLopezWeb

换句话说“输入”立即当任何字符被改变，删除或添加，而控制后失去焦点和只发生时的值已经改变“改变”被评估触发

— 亚当Moszczyński

我刚刚尝试使用Chrome。onchange当您仍然聚焦时按Enter键也会触发。

— 里克

在change event大多数浏览器火灾时，内容变更和元素丢失focus。它基本上是变化的集合。不会像情况那样每次更改都会触发input event。
在input event火上同步为元素的含量变化。因此，事件侦听器倾向于更频繁地触发。
不同的浏览器并不总是同意是否应针对某些类型的交互触发变更事件

— 加布
source

我认为输入事件不能保证同步触发。

— 蒂姆·唐

另外，所有浏览器的当前版本均支持该input事件。

— 蒂姆·唐

@TimDown，这就是我说浏览器支持不同的原因。并非每个人都有每个浏览器的当前版本。

— 加布（Gabe）2013年

@TimDown是否同步触发？

— Suraj Jain

@SurajJain：老实说，我不确定。

— 蒂姆·

MDN文档中有明确的解释（不确定何时添加）：

当用户提交对元素值的更改时，将为input，select和textarea元素触发change事件。与输入事件不同，对于元素值的每次更改，不一定会触发change事件。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/change_event

— 乔尔·H
source