我有一个输入文本,它从一个 Javascript 函数(一个带倒计时的计时器)中获取他的值。
我想在输入文本为 0 时引发一个事件,所以我正在使用更改 eventListener。
不幸的是,当更改来自 javascript 函数时,它似乎没有引发事件。
即使更改来自 Javascript 而不是来自用户,我如何强制更改事件起作用?
我有一个输入文本,它从一个 Javascript 函数(一个带倒计时的计时器)中获取他的值。
我想在输入文本为 0 时引发一个事件,所以我正在使用更改 eventListener。
不幸的是,当更改来自 javascript 函数时,它似乎没有引发事件。
即使更改来自 Javascript 而不是来自用户,我如何强制更改事件起作用?
从精美的手册:
change
当控件失去输入焦点并且其值在获得焦点后已被修改时,将发生 change 事件。此事件对 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/
在更改值的函数中,手动触发change
事件。
var e = document.createEvent('HTMLEvents');
e.initEvent('change', false, false);
some_input_element.dispatchEvent(e);
现在是 2018 年,似乎 initEvent() 已弃用:https : //developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
我认为您现在可以在单行中触发事件: element.dispatchEvent(new Event('change'));
一个更可重用的选项:
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);
}
};
只需在 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">