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

张开发
• 2026/4/12 4:18:31 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何用 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自动审核代码

更多文章