CustomEvent接口的规范在这里:CustomEvent。
现代的前端框架、库或“Custom Elements”等都需要自定义事件来扩展一个模块的功能。当然这些框架/库可能直接提供一些方便的API,如Polymer:
this.fire('myevent', {message: 'success'}, {bubbles: false});
而下面介绍的是,在不依赖特定框架/库的情况下如何创建及使用自定义事件。
创建自定义事件
为了确保对旧版IE的兼容性,以前通常会使用
document.createEvent
及initCustomEvent
的方式来创建自定义事件。
但更现代的浏览器可以直接使用下面这种方式。
// 创建种类为myevent的自定义事件,并放置数据
let myEvent = new CustomEvent("myevent", {
detail: {
doILoveRed: true
}
});
// 监听myevent事件
obj.addEventListener("myevent", function(event) {
console.log(event.detail); // {doILoveRed: true}
});
// 触发事件
obj.dispatchEvent(myEvent);