如何用 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 节点。 幻导航网 发现优质实用网站,开启网络探索之旅!
