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)})
          const input = document.querySelector('.input')

input.addEventListener('change', function (event) {
  console.log(event.target.value)
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере мы выбираем элемент с классом .input с помощью document.querySelector(). Используя метод addEventListener, мы привязываем обработчик события change к элементу. Этот обработчик будет вызываться, когда событие произойдет. Внутри функции мы можем получить новое значение элемента с помощью event.target.value. Это значение будет отображено в консоли после изменения и подтверждения ввода пользователем.

💡 В зависимости от указанного типа в HTML-элементе, change срабатывает по-разному. Легче всего это понять на примере.

Хотя оба события могут использоваться для отслеживания изменений в полях ввода, между ними есть важное различие. Событие input срабатывает на каждое изменение содержимого (при каждом нажатии клавиши). Событие change срабатывает только тогда, когда ввод завершён, и пользователь покинул элемент ввода или подтвердил выбор.

Подробнее о механизме событий читай в статье «Событийная модель».

Событие change похоже на события input и blur, но есть важные отличия:

blur – срабатывает каждый раз при расфокусировке поля.
input – срабатывает сразу же при изменении значения поля.
change – срабатывает, когда значение поля изменено, но при условии снятия с него фокуса.