Onchange событие не срабатывает, когда изменение происходит от другой функции

У меня есть входной текст, который получает его значение из функции Javascript (таймер с обратным отсчетом).

Я хочу вызвать событие, когда входной текст равен 0, поэтому я использую change eventListener.

К сожалению, похоже, что это событие не вызывается, когда изменение происходит из функции javascript.

Как я могу заставить событие изменения работать, даже если изменение исходит от Javascript, а не от пользователя?

Ответ 1

изменить
Событие изменения происходит, когда элемент управления теряет фокус ввода, и его значение было изменено с момента получения фокуса. Это событие действует для INPUT, SELECT и TEXTAREA. элемент.

Когда вы изменяете значение ввода текста через код, событие изменения не будет запущено, потому что нет изменения фокуса. Вы можете инициировать событие самостоятельно, но createEvent и dispatchEvent, например:

el = document.getElementById('x');
ev = document.createEvent('Event');
ev.initEvent('change', true, false);
el.dispatchEvent(ev);

И живая версия: http://jsfiddle.net/ambiguous/nH8CH/

Ответ 2

В функции, которая изменяет значение, вручную запускайте событие change.

var e = document.createEvent('HTMLEvents');
e.initEvent('change', false, false);
some_input_element.dispatchEvent(e);

Ответ 3

Более многоразовый вариант:

function simulate_event(eventName, element) {
    // You could set this into the prototype as a method.
    var event;

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    };

    event.eventName = eventName;

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventName, event);
    }
};

Ответ 4

сейчас 2018 год и кажется, что initEvent() устарела: https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

я думаю, что вы можете вызвать событие в одну строку сейчас: element.dispatchEvent(new Event ('change'));

Ответ 5

Просто переопределите свойство "value" узла, используя getAttribute("value") и setAttribute("value", newValue), в методах получения и установки, а также отправьте событие "change" в конце средства установки. Например:

myNode.onchange = e => console.log("Changed!", e.target.value);

Object.defineProperty(myNode, "value", {
  get: () => myNode.getAttribute("value"),
  set(newValue) {
    myNode.setAttribute("value", newValue);
    myNode.dispatchEvent(new Event("change")); //or define the event earlier, not sure how much of a performance difference it makes though
  }
})

var i = 0;
setTimeout(function changeIt() {
    if(i++ < 10) {
        myNode.value = i;
        setTimeout(changeIt, 1000);
    }
}, 1)

<input id="myNode">