如何用 CustomEvent 构造函数创建携带自定义数据的事件

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），监听时可在任意父级捕获或冒泡阶段接收。 AI Code Reviewer AI自动审核代码