如何创建和触发自定义事件（CustomEvent）？

创建自定义事件：

// 方法一：CustomEvent 构造函数（推荐，可传递数据）
const event = new CustomEvent('userLogin', {
  detail: { username: 'Alice', timestamp: Date.now() },
  bubbles: true,   // 是否冒泡
  cancelable: true  // 是否可取消
});

// 方法二：Event 构造函数
const event2 = new Event('build', { bubbles: true });

监听自定义事件：

element.addEventListener('userLogin', function(e) {
  console.log('用户登录:', e.detail.username);
});

触发自定义事件：

element.dispatchEvent(event);

应用场景：

1. 组件通信：Web Components 内部触发自定义事件，父容器监听
2. 解耦逻辑：业务操作完成后广播事件，多个模块各自监听处理
3. 埋点/统计：统一的自定义事件收集

注意：

• detail 属性用于传递自定义数据
• dispatchEvent 的返回值表示是否有处理函数调用了 preventDefault()
• 自定义事件也可以设置 bubbles: true 实现冒泡