Как я могу запустить событие onchange вручную?

Я устанавливаю значение текстового поля даты и времени через виджет календаря. Очевидно, что виджет календаря делает что-то вроде этого:

document.getElementById('datetimetext').value = date_value;

Я хочу: При изменении значения в текстовом поле даты-времени мне нужно reset некоторые другие поля на странице. Я добавил слушателя событий onchange в поле datetimetext, которое не запускается, потому что я думаю, что onchange запускается только тогда, когда элемент получает фокус и его значение изменяется при потере фокуса.

Следовательно, я ищу способ вручную запустить это событие onchange (которое, я думаю, должно позаботиться о проверке разницы значений в текстовом поле).

Любые идеи?

Ответы

Ответ 1

Есть несколько способов, которыми вы можете это сделать. Если слушатель onchange - это функция, установленная с помощью свойства element.onchange, и вас не беспокоит объект события или пузырь/распространение, самый простой способ - просто вызвать эту функцию:

element.onchange();

Если вам это нужно для симуляции реального события в полном объеме или если вы установили событие через атрибут html или addEventListener/attachEvent, вам нужно немного узнать об обнаружении функции, чтобы правильно запустить событие:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

Ответ 2

MDN предполагает, что в современных браузерах существует гораздо более чистый способ:

// Assuming we're listening for e.g. a 'change' event on `element`

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
element.dispatchEvent(event);