INPUT元素的“更改”和“输入”事件有什么区别

有人能告诉我change和input事件之间的区别是什么？INPUT元素的“更改”和“输入”事件有什么区别

我使用jQuery添加他们：

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

它还与input，而不是change。

也许事件顺序与焦点有一些区别？

来源

2013-06-11 Gabriel Petrovay

http://rakshasingh.weebly.com/1/post/2012/12/what-is-the-注意oninput在旧版浏览器中不受支持。您可以使用：onchange，onpaste和onkeyup作为解决方法。 PS：oninput事件在IE9中也是bug，它不会在删除时触发。 –

输入会更频繁地触发，就像按键之后一样，而当输入变得模糊时，变化基本上会触发，并且该值不是输入聚焦时的值。 – dandavis

'输入'事件也捕获粘贴。请参阅http://stackoverflow.com/questions/15727324/for-a-javascript-autocomplete-search-box-must-we-use-the-input-event-handler – Antony

根据this post：当一个元件的文本内容通过用户接口发生改变

oninput事件。
onchange当选择，选中状态或元件的内容已经改变发生。在某些情况下，只有当元素失去焦点时才会发生。 onchange属性可用于：<input>，<select>和<textarea>。

TL; DR：

oninput：在文本内容
onchange所做的任何变更：
- 如果它是一个<input />：变化+失去焦点
- 如果是<select>：更改选项

$("input, select").on("input", function() { 
 
    $("pre").prepend("\nOn input. | " + this.tagName); 
 
}).on("change", function() { 
 
    $("pre").prepend("\nOn change | " + this.tagName); 
 
}).on("focus", function() { 
 
    $("pre").prepend("\nOn focus | " + this.tagName); 
 
}).on("blur", function() { 
 
    $("pre").prepend("\nOn blur | " + this.tagName); 
 
});

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

来源

2013-06-11 15:12:02

我对这两者之间的区别还不清楚。他们听起来和你的描述非常相似。 –

@JustinMorgan就像在JSFiddle的例子中，'onchange'发生在“当元素失去焦点时”，而oninput在每次文本更改时发生。 –

不同之处在于oninput事件在元素的值发生变化后立即发生，而onchange在事件发生时元素在焦点发生变化后发生变化。 – NinoLopezWeb

change的火灾event在大多数浏览器时的内容被改变，并且元素失去focus，基本上变化的集合体。与inputevent不同，您不会看到每次更改都会触发。
inputevent对于元素的内容更改同步触发。所以你会看到这个事件经常发生。浏览器支持不尽

来源

2013-06-11 15:11:16 Gabe

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

另外，所有浏览器的当前版本都支持“输入”事件。 –

@TimDown，这就是为什么我说浏览器支持各不相同。并非每个人都拥有每个浏览器的当前版本。 – Gabe

INPUT元素的“更改”和“输入”事件有什么区别

回答

相关问题