我已使用addEventListener. 它工作正常。当我想从另一个函数以编程方式触发事件时，我的问题就出现了。
我该怎么做？
如何在 JavaScript 中触发事件？
IT技术
javascript
events
triggers
addeventlistener
dom-events
2021-01-11 20:01:36
6个回答
注意：initEvent方法现已弃用。其他答案具有最新和推荐的做法。
您可以在IE 8或更低版本上使用fireEvent，在大多数其他浏览器上使用W3C 的dispatchEvent。要创建要触发的事件，您可以使用或取决于浏览器。createEventcreateEventObject
这是一段不言自明的代码（来自原型），它dataavailable在 上触发事件element：
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);
如果您不想使用 jQuery 并且不是特别关心向后兼容性，只需使用：
let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be
编辑：根据您的设置，您可能想要添加bubbles: true：
let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));
如果你使用jQuery，你可以简单地做
$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);
并处理它
$('#yourElement').on('customEventName',
function (objectEvent, [arg0, arg1, ..., argN]){
alert ("customEventName");
});
其中“[arg0, arg1, ..., argN]”表示这些参数是可选的。
注意：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 版本。
$(function() {
// Add an event listener.
$(document).on('customChangeEvent', function(e, opts) {
$('body').html(opts.detail);
});
// Trigger the event.
$(document).trigger('customChangeEvent', {
detail: 'Display on trigger...'
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>