JavaScript: как вызвать событие onchange программно?

Быстрый ответ

Для того чтобы инициировать событие изменения после программного обновления значения в поле ввода, создайте новый объект new Event('change') и отправьте его методом .dispatchEvent().

let input = document.querySelector('input');
input.value = 'newVal'; // В этом месте меняем значение
input.dispatchEvent(new Event('change')); // Сразу же инициируем событие об изменении

Программное событие: что это такое?

Программное событие — это метод искусственного вызова событий, которые обычно приводятся в действие пользовательскими действиями. Когда прямое взаимодействие с пользователем не представляется возможным и вам требуется изменить значение поля ввода программно, dispatchEvent() становится незаменимым.

В обычном порядке событие change активируется, когда пользователь изменяет значение элемента ввода. Но при изменении значения с помощью JavaScript автоматического запуска change не произойдет.

Корректная работа со старыми браузерами

Ваш код должен правильно работать не только с новыми, но и со старыми версиями браузеров, к примеру, с IE 10 и ниже. В этом случае обязательным становится использование feature detection.

if (typeof document.body.dispatchEvent === 'function') {
  el.dispatchEvent(new Event('change')); // Инициируем событие смены
} else {
  // Для старых браузеров применяем устаревший метод
  var event = document.createEvent('HTMLEvents');
  event.initEvent('change', false, true);
  el.dispatchEvent(event);
}

Визуализация

Представим, что ваш скрипт — это кукольник в театре марионеток:

До: Марионетка (🤖) не двигается.
Скрипт: 🎭.управлять("🤖", "🏃‍♂️"); // Скрипт управляет куколкой

Когда марионетка начинает движение:

После: Марионетка (🤖) начинает идти (🏃‍♂️)!

Так скрипт информирует зрителей (другие обработчики событий) о происшедших изменениях:

🎭.объявитьСобытие("📣"); // Скрипт объявляет о событии

Так же происходит и в случае с программным обновлением значения поля ввода — событие изменения нужно инициировать вручную.

Использование jQuery

Если вы используете jQuery, то для инициирования события изменения после обновления значения поля ввода подойдет метод .trigger():

$('input').val('newVal').trigger('change'); // Инициируем 'change', подобно герольду средневековья

Такое разделение JavaScript от HTML делает код более поддерживаемым и простым в чтении.

Реагирование на изменения в режиме реального времени: событие 'input'

Если вам необходимо отслеживать изменения в режиме реального времени, воспользуйтесь событием 'input' вместо 'change'. Оно будет активироваться при каждом вводе пользователя или при программном изменении значения.

input.addEventListener('input', function(event) {
  console.log('Значение поля ввода было изменено на: ', event.target.value); // Индикатор изменения
});

Продвинутые способы установки значений

При необходимости управлять изменением событий обратите внимание на Object.getOwnPropertyDescriptor и переопределите стандартный сеттер свойства value. Желаете углубиться в тему? Воспользуйтесь этой ссылкой для получения дополнительной информации.

Полезные материалы

1. .trigger() | Документация jQuery API
2. EventTarget: метод dispatchEvent() – Веб-API | MDN
3. javascript – Как я могу вручную инициировать событие onchange? – Stack Overflow
4. Введение в обработку событий
5. Событие onchange
6. Создание и инициирование событий – Справочник по событиям | MDN
7. Событие change | Документация jQuery API