JS自定义事件

如何创建自定义事件

js的自定义事件可以用CustomEvent这个构造函数来创建

const customEvent = new CustomEvent('customEvent', {
   
  detail: {
   
    message: 'Hello, world!'
  }
});

使用CustomEvent创建一个名为customEvent的自定义事件， 并且在Detail属性里添加一个包含message的内容对象

常用方法

addEventListener

addEventListener方式是用于给元素添加监听器， 需要两个参数， 事件类型和事件的处理函数

document.addEventListener('customEvent', (event) => {
   
  console.log(event.detail.message); // 输出：Hello, world!
});

dispatchEvent

dispatchEvent用于手动触发指定类型的事件

document.dispatchEvent(customEvent)

removeEventListener

removeEventListener方法用于从元素中移除事件监听器， 这个方法需要和addEventListener方法有一样的参数，即事件类型和事件处理函数

使用场景

组件通信

一个组件的状态或数据想要传递给另一个组件， 可以让着两个组件相互通信

// Global 组件，传递 license 信息给 Topbar 组件
document.dispatchEvent(new CustomEvent('license.change', {
    detail: licenseRes.data })