CustomEvent默认不冒泡，需显式设置bubbles: true才可冒泡；必须派发到支持冒泡的DOM元素并正确监听，document/body需已存在；bubbles是构造时选项，非dispatchEvent参数。
自定义事件（CustomEvent）默认**不冒泡**，即使你手动调用 dispatchEvent，也不会向上冒泡到父元素。要让它冒泡，必须在创建事件时显式设置 bubbles: true 选项。
创建可冒泡的 CustomEvent
关键是在 CustomEvent 构造函数的第二个参数中传入 { bubbles: true }：
- ✅ 正确写法（可冒泡）：
const event = new CustomEvent('my-click', { bubbles: true, detail: { x: 100 } }); - ❌ 错误写法（不可冒泡，缺
bubbles或设为false）：const event = new CustomEvent('my-click', { detail: { x: 100 } });（默认bubbles: false）const event = new CustomEvent('my-click', { bubbles: false });
触发后需绑定在支持冒泡的节点上
只有将事件派发到**支持事件冒泡的 DOM 元素**（如 <div>, <span>, <button> 等常规元素），且该元素处于标准文档流中，冒泡才有效：
- 事件必须由
element.dispatchEvent(event)触发，不能只用new Event()或漏掉dispatch - 父级元素需提前用
addEventListener('my-click', handler, false)监听（第三个参数为false或省略，表示捕获后阶段） - ⚠️ 注意：
<body>、<html>、document和window都能接收到冒泡事件，但document.body必须已存在（确保脚本在 DOM 加载后执行）
验证是否冒泡成功的小技巧
可以在各级父元素加监听并打印路径，确认事件是否逐层向上：
立即学习“Java免费学习笔记（深入）”；
child.addEventListener('my-click', e => console.log('child:', e.target));
parent.addEventListener('my-click', e => console.log('parent:', e.target));
document.addEventListener('my-click', e => console.log('document:', e.target));
如果控制台依次输出 child → parent → document，说明冒泡生效。
常见误区提醒
-
bubbles是事件自身的属性，不是dispatchEvent的参数：不能写成el.dispatchEvent(event, { bubbles: true })—— 这个调用方式不存在 -
composed: true是另一个独立选项，用于跨 Shadow DOM 边界，和冒泡无关；若组件用了 Shadow DOM，需同时设bubbles: true和composed: true才能穿透出去 - 原生事件（如
click）默认冒泡，但CustomEvent默认不冒泡 —— 这是重要区别，不能假设行为一致
