CustomEvent 是 HTML5 中派发携带业务数据的自定义事件的标准方式，通过 detail 属性传递任意可序列化数据，支持冒泡与解耦通信。
在HTML5中，CustomEvent 是派发携带业务数据的自定义事件的标准方式，它比直接使用 Event 更灵活，支持通过 detail 属性传递任意结构的数据。
创建并派发带数据的自定义事件
使用 CustomEvent 构造函数创建事件时，第二个参数可传入配置对象，其中 detail 字段用于封装业务数据（如对象、数组、字符串等）。
示例：
const data = { userId: 1001, action: 'login', timestamp: Date.now() };
const event = new CustomEvent('userAction', {
detail: data,
bubbles: true, // 是否冒泡
cancelable: false // 是否可取消
});
document.dispatchEvent(event); // 或 element.dispatchEvent(event)
监听并获取自定义事件中的业务数据
通过 addEventListener 监听事件名后，在回调函数的 event.detail 中即可访问原始数据。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
示例：
document.addEventListener('userAction', (e) => {
console.log('收到业务数据：', e.detail);
// 输出：{ userId: 1001, action: 'login', timestamp: 1716245... }
const { userId, action } = e.detail; // 解构提取关键字段
if (action === 'login') {
console.log(`用户 ${userId} 已登录`);
}
});
注意事项与常见实践
- detail 必须是可序列化的值：虽然浏览器不限制类型，但避免传入函数、DOM 节点或循环引用对象，否则可能在跨上下文（如 iframe）或调试时出问题。
-
事件名建议使用小写中划线格式：如
data-loaded、form-submitted，避免与原生事件冲突，也便于团队识别为自定义事件。 -
作用域需匹配：派发事件的对象（如
document、div）必须与监听对象一致，或依赖冒泡机制（设置bubbles: true）让父级捕获。 - 可结合事件委托使用：在父容器监听自定义事件，适用于动态添加的子元素，减少重复绑定。
进阶：封装一个简易事件总线（Event Bus）
适合组件间解耦通信，尤其在无框架或轻量项目中：
class EventBus {
constructor() {
this.events = {};
}
on(type, callback) {
if (!this.events[type]) this.events[type] = [];
this.events[type].push(callback);
}
emit(type, detail) {
const event = new CustomEvent(type, { detail });
document.dispatchEvent(event);
}
// 可选：内部监听 + 触发回调（不依赖 DOM）
}
// 使用
const bus = new EventBus();
bus.on('api-failure', ({ error, retry }) => {
console.error('请求失败：', error);
if (retry) retry();
});
bus.emit('api-failure', { error: 'Network timeout', retry: () => fetch(...) });
