要让 CustomEvent 具备冒泡能力，需在构造时设 bubbles: true 且触发目标为 DOM 元素；bubbles 仅对 element.dispatchEvent() 有效，必须显式传入 options 对象，监听时需绑定在祖先元素的冒泡或捕获阶段。
要让 CustomEvent 具备冒泡能力，关键是在构造事件时将 bubbles 选项设为 true，并且确保触发目标是 DOM 元素（而非 window 或 document 等非冒泡宿主）。
明确 bubbles 的作用范围
bubbles: true 表示该事件会从触发元素向上逐级传播到父元素、祖先元素，直至 document（但不会到达 window，除非显式在 window 上监听并设置 useCapture）。若设为 false（默认值），事件只在目标元素上触发，不向上冒泡。
- 仅对 DOM 元素有效：只有调用
element.dispatchEvent()时，bubbles才起作用；dispatchEvent在document或window上调用时，即使设bubbles: true，也不会冒泡到更高层（因为已到顶层） - 必须显式传入
options对象：不能通过属性赋值方式后期修改（如event.bubbles = true无效）
正确创建可冒泡的 CustomEvent
使用 CustomEvent 构造函数时，在第二个参数中传入含 bubbles: true 的配置对象：
const event = new CustomEvent('my-action', {
detail: { value: 42 },
bubbles: true, // ✅ 必须显式声明
cancelable: true // 可选，按需设置
});
// 触发到某个 DOM 元素（如一个 div）
document.querySelector('#myButton').dispatchEvent(event);
-
bubbles和cancelable是唯二可在构造时指定的原生事件属性（detail是自定义数据） - 不要写成
bubbles: 'true'或bubbles: 1—— 必须是布尔值true
监听时需注意捕获与冒泡阶段
即使事件可冒泡，监听器也需注册在合适的节点和阶段才能捕获它：
- 在父/祖先元素上使用
addEventListener('my-action', handler)（默认冒泡阶段）即可收到 - 若想在捕获阶段提前处理，加第三个参数
true：parent.addEventListener('my-action', handler, true) - 避免在
document上监听却忘了事件是从子元素冒泡上来的 —— 确保触发路径连通（比如中间没有stopPropagation()）
常见失效原因排查
如果设置了 bubbles: true 却没看到冒泡效果，检查以下几点：
- 是否在
document或window上触发？它们不是普通 DOM 节点，无父节点可冒泡 - 是否在触发前调用了
event.stopPropagation()或event.stopImmediatePropagation()？这会中断冒泡链 - 监听器是否绑定在错误的元素上？比如绑在兄弟节点而非祖先节点
- 是否拼错了事件名？大小写敏感且完全匹配才触发
