“改变"与“改变"的区别和“输入"`input` 元素的事件 [英] Difference between "change" and "input" event for an `input` element
问题描述
谁能告诉我 change
和 input
事件之间的区别是什么?
Can someone tell me what the difference between the change
and input
events is?
我正在使用 jQuery 添加它们:
I am using jQuery for adding them:
$('input[type="text"]').on('change', function() {
alert($(this).val());
})
它也适用于 input
而不是 change
.
It also works with input
instead of change
.
与焦点相关的事件顺序可能有所不同?
Maybe some difference in the event ordering relative to focus?
推荐答案
根据 这篇文章:
oninput
事件在通过用户界面更改元素的文本内容时发生.
oninput
event occurs when the text content of an element is changed through the user interface.
onchange
当元素的选择、选中状态或内容发生变化时发生.在某些情况下,它仅在元素失去焦点或按下 return (Enter) 并且值已更改时发生.onchange 属性可用于:、
和
.
onchange
occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus or when pressing return (Enter) and the value has been changed. The onchange attribute can be used with: <input>
, <select>
, and <textarea>
.
TL;博士:
oninput
:对文本内容所做的任何更改onchange
:- 如果是
:改变+失去焦点
- 如果是
:更改选项
oninput
: any change made in the text contentonchange
:- If it is an
<input />
: change + lose focus - If it is a
<select>
: change option
$("input, select").on("input", function () { $("pre").prepend(" On input. | " + this.tagName + " | " + this.value); }).on("change", function () { $("pre").prepend(" On change | " + this.tagName + " | " + this.value); }).on("focus", function () { $("pre").prepend(" On focus | " + this.tagName + " | " + this.value); }).on("blur", function () { $("pre").prepend(" On 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` 元素的事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
- If it is an
- 如果是