前端小菜鸡拾夕 —— 原生 JS 自定义事件

前端小菜鸡重拾之路

原生 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)