CustomEvent实现事件发布订阅（事件之间的通信）

CustomEvent是一个自定义事件对象，用于表示DOM事件。通过CustomEvent，我们可以创建并触发自定义的事件，实现更灵活的事件处理机制。

介绍

在创建CustomEvent对象时，通常需要指定事件的类型（type）以及一个可选的事件初始化字典（eventInitDict），后者用于设置事件的详细属性。一旦创建了CustomEvent对象，就可以使用dispatchEvent方法将其触发，进而在事件监听器中进行处理。

基本用法

下面是一个简单的示例，展示了如何使用window.CustomEvent来创建一个自定义事件并触发它：

javascript 复制代码

// 创建一个自定义事件  
const myEvent = new CustomEvent('myCustomEvent', {  
  detail: {  
    message: 'Hello, World！'  
  },  
  bubbles: true,  
  cancelable: true  
});  
  
// 触发自定义事件  
window.dispatchEvent(myEvent);  
  
// 监听自定义事件  
window.addEventListener('myCustomEvent', function(event) {  
  console.log(event.detail.message); // 输出: Hello, World！
});

CustomEvent接收两个参数：

type：一个字符串，表示事件的名称。
eventInitDict：一个配置事件的选项对象，是可选的。这个对象可以包含以下属性：
- bubbles：一个布尔值，表示事件是否冒泡。默认为false。
- cancelable：一个布尔值，表示事件是否可以被取消。默认为false。
- detail：包含传递给事件监听器的任何自定义数据的对象。

接下来我们实现属于自己的发布订阅工具函数吧

我这里是基于TS封装的一个发布订阅函数，接下来我们来解析它：

php 复制代码

function createEventHandler<DataType>(name: string) {

  const addEventListener = (
    Win: Window,
    fn: (e: { detail: DataType }) => void
  ) => {
    // @ts-ignore
    Win.addEventListener(name, fn)

    // @ts-ignore
    const eject = () => Win.removeEventListener(name, fn)

    return eject
  }

  const dispatch = (
    Win: Window,
    data: DataType
  ) => {
    Win.dispatchEvent(
      new CustomEvent(name, { detail: data })
    )
  }

  return {
    addEventListener,
    dispatch
  }

}

我们定义了一个名叫createEventHandler的函数并暴露发布（dispatch） 和订阅（addEventListener） 这两个方法:

addEventListener：接收两个参数，一个是Window对象，一个是事件订阅的回调。
dispatch：接收两个参数，一个是Window对象，一个是发布事件所需的内容。

用法：

javascript 复制代码

const { addEventListener, dispatch } = createEventHandler('handleMessage')

const eject = addEventListener(window, ({ detail }) => {
  console.log(detail); // { message: 1111 }
  
})

setTimeout(() => {
  dispatch(window, { message: 1111 })
  
   // 当不再需要事件监听器时，可以调用 eject 函数来移除它  
   eject();

})

在这个示例中，我们创建了一个名为 'handleMessage' 的自定义事件，其 detail 属性包含对象 { message: 1111 }。我们添加了一个事件监听器来打印这个对象，并在之后触发了这个事件。最后，我们使用返回的 eject 函数移除了事件监听器。

CustomEvent在Web开发中非常有用，尤其是在需要实现组件间通信或处理特定业务逻辑时。通过自定义事件，开发者可以更精确地控制事件的触发和响应，从而实现更复杂的交互和功能。

需要注意的是，由于CustomEvent是DOM API的一部分，因此它主要在浏览器环境 （大部分浏览器都支持） 中使用。在非浏览器环境 （如Node.js） 中，可能无法使用CustomEvent或需要使用类似功能的库或工具。