onchange event not fire when the change come from another function

问题

I have a input text that get his value from a Javascript function (a timer with countdown).

I want to raise an event when the input text is 0 ,so i am using the change eventListener.

Unfortunately it doesn't seem to raise the event when the change is coming from javascript function.

How can I force the change event to work, even if the change is coming from Javascript and not from the user?

回答1:

From the fine manual:

change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

When you modify the text input's value through code, the change event will not be fired because there is no focus change. You can trigger the event yourself though with createEvent and dispatchEvent, for example:

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

And a live version: http://jsfiddle.net/ambiguous/nH8CH/

回答2:

In the function that changes the value, manually fire a change event.

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

回答3:

A more reusable option :

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:

it's 2018 now and seems that initEvent() is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

i think you can trigger the event in a one-liner now: element.dispatchEvent(new Event('change'));

回答5:

Simply redefine the "value" property of the node, using getAttribute("value") and setAttribute("value", newValue), in the getters and setters, as well as dispatch the "change" event at the end of the setter. For example:

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">

来源：https://stackoverflow.com/questions/7055729/onchange-event-not-fire-when-the-change-come-from-another-function

标签

javascript

dom-events