change

Работаем со значением, когда пользователь зафиксирует свои изменения

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Событие 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 – срабатывает когда значение поля изменено, но при условии снятия с него фокуса.

Открыть демо в новой вкладке