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

110

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

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

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

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

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

javascript jquery events dom Габриэль Петровай
источник

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

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