Разница между событием «change» и «input» для элемента «input»

110

Может кто - нибудь сказать мне , что разница между changeи inputсобытиями?

Я использую jQuery для их добавления:

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

Он также работает inputвместо change.

Может быть какая-то разница в порядке событий относительно фокуса?

— Габриэль Петровай
источник

rakshasingh.weebly.com/1/post/2012/12/… Обратите внимание, что oninput не поддерживается в старых версиях браузеров. Тогда вы можете использовать: onchange, onpaste и onkeyup в качестве обходного пути. PS: событие oninput также ошибочно в IE9 и не запускается при удалении.

— A. Wolff

ввод срабатывает чаще, например, после нажатия клавиши, тогда как изменение в основном срабатывает, когда ввод размыт, а значение не то, что было, когда ввод был сфокусирован.

— dandavis

inputСобытие также захватывает наклеивать. См. Stackoverflow.com/questions/15727324/…

— Энтони

TL; DR: ввод срабатывает при вводе, меняет огонь, когда вы нажимаете снаружи

— Мухаммад Умер

Ответы:

118

Согласно этому сообщению :

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>

Развернуть фрагмент

— Ионика Бизэу
источник

Я до сих пор не понимаю, в чем разница между ними. Судя по вашим описаниям, они очень похожи.

— Джастин Морган

@JustinMorgan Как и в примере JSFiddle, onchangeпроисходит «когда элемент теряет фокус», а oninputпроисходит при каждом изменении текста.

— Ionică Bizău

Разница в том, что событие oninput происходит сразу после изменения значения элемента, а событие onchange происходит, когда элемент теряет фокус после изменения содержимого.

— NinoLopezWeb 06

Другими словами, «ввод» запускается немедленно при изменении, удалении или добавлении любого символа, в то время как «изменение» оценивается после того, как элемент управления теряет фокус и происходит только тогда, когда значение изменилось

— Адам

Я только что пробовал с Chrome. onchangeтакже срабатывает, когда вы нажимаете Enter, все еще фокусируясь.

— Рик

В change eventпожарах в большинстве браузеров , когда содержание меняются , а элемент теряет focus. По сути, это совокупность изменений. Он не срабатывает при каждом изменении, как в случае input event.
В input eventпожарах синхронно на изменении содержания для элемента. Таким образом, прослушиватель событий имеет тенденцию срабатывать чаще.
Различные браузеры не всегда соглашаются, следует ли запускать событие изменения для определенных типов взаимодействия.

— Гейб
источник

Я не думаю, что событие input срабатывает синхронно.

— Tim Down

Кроме того, это inputмероприятие поддерживают текущие версии всех браузеров .

— Tim Down

@TimDown, поэтому я сказал, что поддержка браузеров разная. Не у всех есть текущая версия каждого браузера.

— Гейб

@TimDown Срабатывает синхронно?

— Сурадж Джайн

@SurajJain: Честно говоря, я не уверен.

— Тим Даун

В документации MDN есть четкое объяснение (не уверен, когда оно было добавлено):

Событие изменения обжигают для input, selectи textareaэлементы , когда изменение к значению элемента совершается пользователем. В отличие от события ввода, событие изменения не обязательно запускается при каждом изменении значения элемента .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

— Джоэл Х
источник