CustomEvent 构造函数创建自定义事件需传入事件名和含 detail 属性的配置对象，detail 为必需字段用于携带任意数据；通过 dispatchEvent 触发，addEventListener 监听时通过 event.detail 读取数据；可选 bubbles、cancelable 等配置控制事件行为。
用 CustomEvent 构造函数创建携带自定义数据的事件，关键在于正确传入事件名和包含 detail 属性的配置对象。
基本语法：传入事件名和 detail 数据
CustomEvent 是浏览器原生构造函数，必须通过 new CustomEvent() 调用。第二个参数是配置对象，其中 detail 是唯一必需的自定义字段，用于携带任意类型的数据（字符串、对象、数组等）：
const event = new CustomEvent('user-login', {
detail: { userId: 123, username: 'alice' }
});
注意：detail 不是可选的——如果不传或设为 undefined，该属性在事件中将为 undefined，无法访问有效数据。
触发自定义事件：用 dispatchEvent 发送到目标元素
构造完事件后，需调用目标元素（如 document、window 或某个 DOM 节点）的 dispatchEvent() 方法来触发：
// 向 document 派发
document.dispatchEvent(event);
// 或向特定元素派发
const button = document.querySelector('#submit');
button.dispatchEvent(new CustomEvent('form-submit', {
detail: { timestamp: Date.now() }
}));
事件会按标准冒泡规则传播（除非显式设置 bubbles: false），监听时可在任意父级捕获或冒泡阶段接收。
监听并读取 detail 数据：在事件处理器中访问 event.detail
使用 addEventListener 监听自定义事件名，回调函数的 event 参数即为 CustomEvent 实例，其 detail 属性就是你传入的数据：
document.addEventListener('user-login', (e) => {
console.log(e.detail.userId); // → 123
console.log(e.detail.username); // → 'alice'
});
// 也可以解构
document.addEventListener('form-submit', ({ detail }) => {
console.log(detail.timestamp);
});
确保监听的事件名与 new CustomEvent() 中的第一个参数完全一致（区分大小写）。
可选配置：控制冒泡、取消性和是否可重用
除 detail 外，CustomEvent 配置对象还支持以下布尔选项：
-
bubbles: true—— 允许事件冒泡（默认false） -
cancelable: true—— 允许调用e.preventDefault()（默认false） -
composed: true—— 在 Shadow DOM 跨边界传播（仅对 Web Components 有意义）
const event = new CustomEvent('data-loaded', {
detail: { items: [] },
bubbles: true,
cancelable: true
});
大多数场景只需关注 detail 和 bubbles；cancelable 适合需要被拦截的业务逻辑（如表单提交前校验）。
