我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
当前回答
注意:initCustomEvent方法现在已弃用。其他回答功能最新的和建议的做法。
如果您支持IE9+,您可以使用以下。在《你可能不需要jQuery》中也包含了同样的概念。
function addEventListener(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function() { handler.call(el); }); } } function triggerEvent(el, eventName, options) { var event; if (window.CustomEvent) { event = new CustomEvent(eventName, options); } else { event = document.createEvent('CustomEvent'); event.initCustomEvent(eventName, true, true, options); } el.dispatchEvent(event); } // Add an event listener. addEventListener(document, 'customChangeEvent', function(e) { document.body.innerHTML = e.detail; }); // Trigger the event. triggerEvent(document, 'customChangeEvent', { detail: 'Display on trigger...' });
如果您已经在使用jQuery,下面是上面代码的jQuery版本。
$(函数(){ //添加事件监听器 美元(文档)。on('customChangeEvent',函数(e, opts) { $('体'). html (opts.detail); }); //触发事件 美元(文档)。触发(customChangeEvent, { detail: '显示在触发器…' }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本>
其他回答
function fireMouseEvent(obj, evtName) {
if (obj.dispatchEvent) {
//var event = new Event(evtName);
var event = document.createEvent("MouseEvents");
event.initMouseEvent(evtName, true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
obj.dispatchEvent(event);
} else if (obj.fireEvent) {
event = document.createEventObject();
event.button = 1;
obj.fireEvent("on" + evtName, event);
obj.fireEvent(evtName);
} else {
obj[evtName]();
}
}
var obj = document.getElementById("......");
fireMouseEvent(obj, "click");
值得注意的是,我们可以创建任何类型的预定义事件,并在任何地方收听。
我们并不局限于经典的内置事件。
在这个基本示例中,自定义事件interfacebuiltsuccessuserdefinedevent每3秒在self.document上分派一次
self.document。addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false) setInterval(() =>{//测试 self.document。dispatchEvent(新事件(interfacebuiltsuccessuserdefinedevent)) }, 3000) //测试
有趣的事实:元素可以侦听尚未创建的事件。
注意:initEvent方法现在已弃用。其他回答功能最新的和建议的做法。
你可以在ie8或更低版本上使用fireEvent,在大多数其他浏览器上使用W3C的dispatchEvent。要创建想要触发的事件,可以根据浏览器使用createEvent或createEventObject。
下面是一段不言自明的代码(来自原型),它可以触发元素上可用的事件数据:
var event; // The custom event that will be created
if(document.createEvent){
event = document.createEvent("HTMLEvents");
event.initEvent("dataavailable", true, true);
event.eventName = "dataavailable";
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventName = "dataavailable";
event.eventType = "dataavailable";
element.fireEvent("on" + event.eventType, event);
}
一个工作的例子:
// Add an event listener
document.addEventListener("name-of-event", function(e) {
console.log(e.detail); // Prints "Example of an event"
});
// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
对于较旧的浏览器填充和更复杂的示例,请参阅MDN文档。
请参阅EventTarget的支持表。dispatchEvent和CustomEvent。
如果你不想使用jQuery,也不特别关心向后兼容性,可以使用:
let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be
请在这里和这里查看文档。
编辑:根据你的设置,你可能想要添加气泡:true:
let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));