change

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

Это событие лучше всего использовать при создании форм, когда не требуется постоянно взаимодействовать с каждым изменённым символом в поле ввода. Так же данное событие пригодится и при создании чекбоксов, полей выбора и т. п.

        
          
          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)
})

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

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

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

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

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