可直接将复杂对象赋值给CustomEvent的detail属性，无需JSON序列化；监听器通过event.detail直接访问克隆后的副本，但function、undefined等不可克隆类型需规避或改用标识符方案。
不能直接用 detail 属性传递复杂对象给自定义监听器——因为 detail 本身是事件对象的一个只读属性，它不“接收”数据，而是你在创建 CustomEvent 时**主动赋值**进去的。关键在于：如何正确构造事件并把对象塞进 detail，再让监听器安全读取。
确保 detail 是你传入的对象（不是字符串或 null）
很多人误以为要先序列化对象（比如 JSON.stringify），其实完全不需要。浏览器原生支持将任意 JS 对象（包括数组、嵌套对象、Date、Map 等）作为 detail 值，只要它可被结构化克隆（structured clone）——现代浏览器基本都支持。
- ✅ 正确：直接传对象字面量或变量
- ❌ 错误：传
JSON.stringify(obj)，会导致监听器收到字符串，还得手动JSON.parse - ⚠️ 注意：
function、undefined、Symbol、带循环引用的对象无法被克隆，会报错或被忽略
创建事件时显式指定 detail 字段
使用 CustomEvent 构造函数，并在 options 中传入 { detail: yourObject }：
const payload = {
id: 123,
user: { name: 'Alice', roles: ['admin'] },
timestamp: new Date()
};
// ✅ 正确写法
const event = new CustomEvent('data-updated', {
detail: payload,
bubbles: true,
cancelable: false
});
element.dispatchEvent(event);
监听器中直接访问 event.detail
在自定义监听器里，无需解构或额外解析，event.detail 就是你传进去的原始对象（结构化克隆后的副本，非引用）：
element.addEventListener('data-updated', (e) => {
console.log(e.detail.id); // → 123
console.log(e.detail.user.name); // → 'Alice'
console.log(e.detail.timestamp); // → Date 对象（已克隆）
// 可放心修改 e.detail（不影响原始对象，因为是副本）
e.detail.processed = true;
});
处理不可克隆的数据类型（如函数或实例）
如果必须传函数、RegExp、canvas context 等无法结构化克隆的内容，需改用其他方式：
- 提前把函数挂到全局或组件实例上，
detail中只传标识符（如{ handlerKey: 'onSuccess' }），监听器查表调用 - 对特殊对象做轻量序列化（例如
canvas.toDataURL()）再传字符串 - 避免在
detail中传 DOM 元素或window，它们无法跨上下文克隆
