JavaScript 自定义事件实现指南

在JavaScript中，实现自定义事件功能可以通过以下几种方式：

1. 使用Event构造函数（现代浏览器）

// 创建自定义事件
const event = new Event('customEvent', {
  bubbles: true,    // 事件是否冒泡
  cancelable: true  // 事件能否被取消
});

// 添加事件监听
document.addEventListener('customEvent', function(e) {
  console.log('自定义事件触发', e);
});

// 触发事件
document.dispatchEvent(event);

2. 使用CustomEvent构造函数（可传递数据）

// 创建带数据的自定义事件
const customEvent = new CustomEvent('customEventWithData', {
  detail: {         // 可以传递自定义数据
    message: 'Hello World',
    time: new Date()
  },
  bubbles: true,
  cancelable: true
});

// 添加事件监听
document.addEventListener('customEventWithData', function(e) {
  console.log('收到自定义事件:', e.detail.message);
  console.log('事件时间:', e.detail.time);
});

// 触发事件
document.dispatchEvent(customEvent);

3. 传统方式（兼容旧浏览器）

// 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'
event.initEvent('build', true, true); // 事件名, 是否冒泡, 是否可取消

// 监听事件
document.addEventListener('build', function(e) {
  console.log('传统方式自定义事件触发');
}, false);

// 触发事件
document.dispatchEvent(event);

4. 在自定义类中实现事件系统

class EventEmitter {
  constructor() {
    this.events = {};
  }

  // 监听事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  // 触发事件
  emit(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.forEach(callback => {
        callback(...args);
      });
    }
  }

  // 移除监听
  off(eventName, callback) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      this.events[eventName] = callbacks.filter(cb => cb !== callback);
    }
  }
}

// 使用示例
const emitter = new EventEmitter();
emitter.on('data', (data) => {
  console.log('收到数据:', data);
});
emitter.emit('data', { id: 1, name: '测试数据' });

5. 使用DOM元素作为事件目标

// 创建一个div作为事件目标
const eventTarget = document.createElement('div');

// 添加事件监听
eventTarget.addEventListener('myEvent', (e) => {
  console.log('自定义事件被触发', e.detail);
});

// 触发事件
const event = new CustomEvent('myEvent', {
  detail: { key: 'value' }
});
eventTarget.dispatchEvent(event);

注意事项

1. 自定义事件名不要使用浏览器原生事件名（如click、mouseover等）
2. 考虑事件的冒泡和捕获阶段
3. 如果需要传递数据，使用CustomEvent的detail属性
4. 移除不再需要的事件监听以避免内存泄漏

以上方法可以根据你的具体需求选择使用，现代浏览器推荐使用Event或CustomEvent构造函数。