如何在 JavaScript 中触发事件？

javascript dom-events events addeventlistener triggers

2022-08-29 22:40:21

我已使用将事件附加到文本框。它工作正常。当我想从另一个函数以编程方式触发事件时，我的问题出现了。addEventListener

我该怎么做？

答案 1

注意：initEvent 方法现已弃用。其他答案具有最新和推荐的实践。

您可以在IE 8或更低版本上使用fireEvent，并在大多数其他浏览器上使用W3C的dispatchEvent。要创建要触发的事件，您可以使用其中一项，也可以根据浏览器进行操作。createEventcreateEventObject

下面是一段不言自明的代码（来自原型），它在：dataavailableelement

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);
}

答案 2

一个工作示例：

// 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);

有关较旧的浏览器 polyfill 和更复杂的示例，请参阅 MDN 文档。

请参阅 EventTarget.dispatchEvent 和 CustomEvent 的支持表。