前端小菜鸡重拾之路
原生 JS 事件
Event 构造器 / 可以传递数据的 CustomEvent 构造器
// 创建事件
// var myEvent = new Event("event_name")
var myEvent = new CustomEvent("event_name", {
detail: {
// 将需要传递的数据写到 detail 中,以便在 EventListener 中获取
// 数据将会在 EventListener 回调函数的 event.detail 中得到
}
})
// 监听事件
window.addEventListener("event_name", function(event) {
// CustomEvent 创建的事件数据在 event.detail 中
console.log(event.detail)
})
// 触发事件
window.dispatchEvent(myEvent)
下面这种方法不建议使用,createEvent 使用的许多方法都被废弃
// 创建事件
var event = document.createEvent("Event")
// 初始化事件
event.initEvent("build", true, true) // 参数分别为
// 自定义事件类型(事件名)
// 事件是否冒泡
// 是否可以使用 preventDedault() 方法取消事件
// 监听事件
element.addEventListener("build", function(e) {
// statement
}, false) // 第三个参数指定事件是否在捕获/冒泡阶段实行
// 触发事件 对象可以是任何元素 / 其他事件目标
element.dispatchEvent(event)