Событие change
Событие change срабатывает, когда пользователь изменяет значение в <input>, <select> или <textarea> и фиксирует свои изменения.
Это событие лучше всего использовать при создании форм, когда не требуется постоянно взаимодействовать с каждым изменённым символом в поле ввода. Так же данное событие пригодится и при создании чекбоксов, полей выбора и т. п.
Когда использовать
В текстовых полях (<input>, <textarea>), когда нужно получить окончательное значение после завершения ввода.
В выпадающих списках (<select>), если пользователь выбрал новое значение из дропдауна с доступными опциями.
Чекбоксы и радиокнопки (<input type="checkbox">, <input type="radio">), когда состояние переключается между «выбрано» и «не выбрано». Например, при отправке формы или при взаимодействии с выбором нескольких значений (чекбоксы или выпадающие списки).
Пример:
const input = document.querySelector('.input')
input.addEventListener('change', function (event) {
console.log(event.target.value)
})
В этом примере мы выбираем элемент с классом .input с помощью document.querySelector(). Используя метод addEventListener, мы привязываем обработчик события change к элементу. Этот обработчик будет вызываться, когда событие произойдет. Внутри функции мы можем получить новое значение элемента с помощью event.target.value. Это значение будет отображено в консоли после изменения и подтверждения ввода пользователем.
👉 @frontendInterview