javascript 当更改来自另一个函数时不会触发 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7055729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onchange event not fire when the change come from another function
提问by baaroz
I have a input text that get his value from a Javascript function (a timer with countdown).
我有一个输入文本，它从一个 Javascript 函数（一个带倒计时的计时器）中获取他的值。
I want to raise an event when the input text is 0 ,so i am using the change eventListener.
我想在输入文本为 0 时引发一个事件，所以我正在使用更改 eventListener。
Unfortunately it doesn't seem to raise the event when the change is coming from javascript function.
不幸的是，当更改来自 javascript 函数时，它似乎没有引发事件。
How can I force the change event to work, even if the change is coming from Javascript and not from the user?
即使更改来自 Javascript 而不是来自用户，我如何强制更改事件起作用？
回答by mu is too short
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.
change
当控件失去输入焦点并且其值在获得焦点后已被修改时，将发生 change 事件。此事件对 INPUT、SELECT 和 TEXTAREA 有效。元素。
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 createEventand dispatchEvent, for example:
当您通过代码修改文本输入的值时，不会触发更改事件，因为没有焦点更改。您可以使用createEvent和自己触发事件dispatchEvent，例如：
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/
还有一个实时版本：http: //jsfiddle.net/ambiguous/nH8CH/
回答by Delan Azabani
In the function that changes the value, manually fire a changeevent.
在更改值的函数中，手动触发change事件。
var e = document.createEvent('HTMLEvents');
e.initEvent('change', false, false);
some_input_element.dispatchEvent(e);
回答by Carl Chang
it's 2018 now and seems that initEvent() is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
现在是 2018 年，似乎 initEvent() 已弃用：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'));
我认为您现在可以在单行中触发事件： element.dispatchEvent(new Event('change'));
回答by bluejayke
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:
只需在 getter 和 setter 中使用getAttribute("value")and重新定义节点的“value”属性，并setAttribute("value", newValue)在 setter 的末尾分派“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">回答by Chris
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);
}
};
