回答

两种方式

1、通过document.addEventListener实现

// 监听事件，当事件触发时，执行回调函数
document.addEventListener('test', (event) => {
  console.log(event.detail.title); // 从事件对象中获取传递的数据
});
   // 创建一个带有自定义数据的 CustomEvent 对象

const event = new CustomEvent('test', {
  detail: { title: '事件携带的数据' } // 使用 'detail' 属性来传递额外的数据
});

// 触发事件，并将自定义数据作为参数传递
document.dispatchEvent(event);

<script type="text/javascript">
  
class EventBus {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }

  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach((callback) => {
        callback(data);
      });
    }
  }

  off(event, callback) {
    if (this.listeners[event]) {
      this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback);
    }
  }
}

// 使用 EventBus
const eventBus = new EventBus();

// 注册监听器
eventBus.on('myEvent', (data) => {
  console.log('Event received with data:', data);
});

// 触发事件
eventBus.emit('myEvent', { message: 'Hello World!' });

// 取消监听器
// eventBus.off('myEvent', someCallbackFunction);
</script>