Input и change: изменение значения и его подтверждение
Input и change сообщают о разных этапах взаимодействия с полем. Для текстового ввода input обычно приходит по мере редактирования, а change — при подтверждении изменения, например после ухода из поля.
Назначение
Input и change сообщают о разных этапах взаимодействия с полем. Для текстового ввода input обычно приходит по мере редактирования, а change — при подтверждении изменения, например после ухода из поля.
Как это работает
В собственном документе создайте input id event-text с подписью. Подключите код после разметки и наблюдайте порядок сообщений. Для select и checkbox моменты change отличаются от текстового поля.
Пример
const field = document.querySelector("#event-text");
field.addEventListener("input", () => console.log("input:", field.value));
field.addEventListener("change", () => console.log("change:", field.value));Что должно получиться
Во время набора появляются сообщения input, а после завершения редактирования — change, если значение действительно изменилось. Точный сценарий зависит от типа элемента и способа ввода.
Граница применения и частая ошибка
Присваивание field.value кодом не вызывает эти события автоматически. Не отправляйте сетевой запрос на каждый символ без оценки нагрузки. Для составного ввода через IME учитывайте композицию и не принимайте промежуточный текст за окончательное значение.
Самостоятельная проверка
Сравните набор, вставку из буфера, отмену редактирования и уход клавишей Tab. Затем повторите опыт с select. Запишите, какое событие подходит предварительному просмотру, а какое — сохранению подтверждённого выбора.