Разница между "изменением" и "вводом" события для элемента "ввода"

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

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

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

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

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

Ответы

Ответ 1

Согласно этому посту:

  • Событие 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>

Ответ 2

  • event change срабатывает в большинстве браузеров, когда содержимое изменяется, и элемент теряет focus. Это в основном совокупность изменений. Он не сработает для каждого отдельного изменения, как в случае event input.

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

  • Различные браузеры не всегда согласны с тем, следует ли запускать событие изменения для определенных типов взаимодействия.

Ответ 3

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

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

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