如何以编程方式对输入强制执行 onchange 事件？
我试过这样的事情：
var code = ele.getAttribute('onchange');
eval(code);
但我的最终目标是触发任何侦听器函数，这似乎不起作用。也不只是更新“值”属性。
如何以编程方式对输入强制执行 onchange 事件？
IT技术
javascript
2021-01-29 02:19:57
6个回答
创建一个Event对象并将其传递给dispatchEvent元素的方法：
var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);
这将触发事件侦听器，无论它们是通过调用addEventListener方法还是通过设置onchange元素的属性来注册的。
如果希望事件冒泡，则需要向Event构造函数传递第二个参数：
var event = new Event('change', { bubbles: true });
有关浏览器兼容性的信息：
在 jQuery 中，我主要使用：
$("#element").trigger("change");
不要对任何东西使用 eval 。嗯，有一些东西，但它们非常罕见。相反，你会这样做：
document.getElementById("test").onchange()
在这里查看更多选项：http : //jehiah.cz/archive/firing-javascript-events-properly
出于某种原因，ele.onchange() 在我的页面上的 IE 中为我抛出了一个“找不到方法”的异常，所以我最终使用了Kolten提供的链接中的这个函数并调用了 fireEvent(ele, 'change')，它起作用了：
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
但是，我确实创建了一个测试页面，确认调用应该 onchange() 工作：
<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>
编辑： ele.onchange() 不起作用的原因是因为我实际上没有为 onchange 事件声明任何内容。但是 fireEvent 仍然有效。
取自QUnit底部
function triggerEvent( elem, type, event ) {
if ( $.browser.mozilla || $.browser.opera ) {
event = document.createEvent("MouseEvents");
event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
elem.dispatchEvent( event );
} else if ( $.browser.msie ) {
elem.fireEvent("on"+type);
}
}
当然，您可以将 $.browser 内容替换为您自己的浏览器检测方法，以使其独立于 jQuery。
要使用此功能：
var event;
triggerEvent(ele, "change", event);
这基本上会触发真正的 DOM 事件，就好像某些事情真的发生了变化。