JavaScript中的EventTarget与自定义事件系统

1. 事件系统基础概念
JavaScript中的事件系统基于观察者模式，由三个核心部分组成：

• 事件目标（EventTarget）：能够接收事件、监听事件和派发事件的对象
• 事件对象（Event）：包含事件相关信息的对象
• 事件监听器（EventListener）：处理事件的回调函数

2. EventTarget接口详解
EventTarget是一个抽象接口，DOM中的Node元素都实现了该接口。它包含三个核心方法：

class EventTarget {
  addEventListener(type, listener, options)    // 注册事件监听器
  removeEventListener(type, listener, options) // 移除事件监听器
  dispatchEvent(event)                         // 派发事件
}

3. 自定义事件的创建与派发
通过CustomEvent构造函数创建自定义事件：

// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
  detail: { message: 'Hello Custom Event' }, // 传递自定义数据
  bubbles: true,    // 是否冒泡
  cancelable: true  // 是否可取消
})

// 派发事件
element.dispatchEvent(customEvent)

4. 事件监听器的注册与移除
事件监听器有多种注册方式：

// 方式1：addEventListener（推荐）
const handler = (event) => {
  console.log(event.detail.message)
}
element.addEventListener('myEvent', handler)

// 方式2：onEvent属性（仅限标准事件）
element.onmyEvent = handler // 注意：自定义事件通常不支持

// 移除监听器
element.removeEventListener('myEvent', handler)

5. 事件选项配置详解
addEventListener的第三个参数支持多种配置：

// 对象形式配置
element.addEventListener('myEvent', handler, {
  capture: false,     // 是否在捕获阶段触发
  once: true,         // 是否只触发一次
  passive: false,     // 是否被动监听（性能优化）
  signal: abortSignal // 通过AbortSignal控制监听器生命周期
})

// 布尔值形式（仅控制capture）
element.addEventListener('myEvent', handler, true)

6. 事件冒泡与捕获机制
事件流包含三个阶段：

• 捕获阶段：从window向下传播到目标元素
• 目标阶段：到达目标元素
• 冒泡阶段：从目标元素向上传播到window

// 捕获阶段监听
parent.addEventListener('myEvent', handler, { capture: true })

// 冒泡阶段监听（默认）
child.addEventListener('myEvent', handler)

// 停止事件传播
function handler(event) {
  event.stopPropagation() // 阻止继续传播
  event.stopImmediatePropagation() // 阻止其他监听器执行
}

7. 实现自定义EventTarget类
可以创建独立的事件目标对象：

class CustomEventTarget {
  constructor() {
    this.listeners = new Map()
  }

  addEventListener(type, listener) {
    if (!this.listeners.has(type)) {
      this.listeners.set(type, new Set())
    }
    this.listeners.get(type).add(listener)
  }

  removeEventListener(type, listener) {
    if (this.listeners.has(type)) {
      this.listeners.get(type).delete(listener)
    }
  }

  dispatchEvent(event) {
    const listeners = this.listeners.get(event.type)
    if (listeners) {
      listeners.forEach(listener => {
        if (typeof listener === 'function') {
          listener.call(this, event)
        }
      })
    }
  }
}

8. 实际应用场景

• 组件通信：在Web Components中实现组件间通信
• 状态管理：实现简单的发布-订阅模式
• 插件系统：允许插件监听应用生命周期事件
• 异步操作通知：在长时间操作完成后通知相关模块

9. 性能优化建议

• 使用passive: true优化滚动等频繁事件
• 及时移除不需要的事件监听器防止内存泄漏
• 对高频事件使用防抖或节流
• 避免在捕获阶段使用复杂逻辑

通过掌握EventTarget和自定义事件系统，可以构建更加灵活和可维护的事件驱动架构。