如何用 bubbles 参数让自定义事件支持在 DOM 树中冒泡

自定义事件默认不冒泡，必须在构造时通过 options 对象显式设置 bubbles: true 才能生效，如 new Event('e', {bubbles: true})；触发需调用 dispatchEvent()，监听可直接用 addEventListener，冒泡阶段自动传递。默认情况下，自定义事件（通过 CustomEvent 或 Event 构造函数创建）**不会冒泡**，即使你手动设置 bubbles: true，也必须在构造时正确传入配置对象，否则无效。确保 bubbles 参数生效的关键：用 Event 构造函数或 CustomEvent 的 options 对象直接写 new Event('myevent', { bubbles: true }) 是最简洁可靠的方式。注意：不能只传字符串，必须传第二个参数（options 对象），且其中明确包含 bubbles: true。错误写法：new Event('myevent') —— 此时 bubbles 默认为 false 正确写法：new Event('myevent', { bubbles: true }) 使用 CustomEvent 同样有效：new CustomEvent('myevent', { bubbles: true, detail: { msg: 'hello' } })触发后需在目标元素上调用 dispatchEvent创建事件对象只是第一步，你还得显式调用 element.dispatchEvent()。冒泡行为由事件系统自动处理，前提是该事件对象本身支持冒泡（即 bubbles === true）且目标元素是 DOM 节点。 幻导航网 发现优质实用网站,开启网络探索之旅！