咨询：源自定义元素的冒泡自定义事件无法被另一自定义元素内Div捕获？

首先得明确自定义事件的冒泡核心规则：事件只会沿着触发元素的DOM父级链向上传播，不会横向跳转到无关的DOM节点上。

为什么你会遇到这个现象？ #

当你在source自定义元素（也就是你的elAuthorSelect）触发authorChanged事件时，哪怕设置了bubbles: true，事件的传播路径也只是：
elAuthorSelect → 它的直接父元素 → ... → body → document

如果你的destination自定义元素和source元素在DOM结构里是兄弟节点、或者属于完全独立的分支，那destination内部的div根本不在这个冒泡路径上，自然监听不到事件。

怎么验证这个传播路径？ #

你可以在document的事件监听器里打印event.composedPath()，它会返回一个数组，包含事件传播过程中经过的所有DOM节点，一眼就能确认destination的div不在其中：

document.addEventListener('authorChanged', (e) => {
  console.log(e.composedPath()); // 查看事件完整传播路径
});

如果你需要让destination捕获到事件，有两种常用方案： #

• 方案一：利用共同祖先监听
  找到source和destination的共同父级DOM元素（如果没有就用document），在这个共同节点上监听事件，然后在回调里根据需求处理（比如判断事件来源，或者直接把事件逻辑定向到destination）。

• 方案二：手动向目标元素派发事件
  在source触发事件的逻辑里，主动找到destination内部的div，给它单独派发一次事件：

  // 先触发全局冒泡的事件（保持原有逻辑）
  elAuthorSelect.dispatchEvent(new CustomEvent('authorChanged', { 
    detail: { name: 'test' }, 
    bubbles: true, 
    cancelable: true 
  }));
  // 再给destination内部的div手动派发事件
  const destDiv = document.querySelector('destination div');
  destDiv.dispatchEvent(new CustomEvent('authorChanged', { 
    detail: { name: 'test' }, 
    bubbles: false // 这里不需要冒泡，直接触发即可
  }));
  

补充：如果涉及Shadow DOM的情况 #

如果你的自定义元素使用了Shadow DOM，那还要确保事件的composed: true（你已经能在document监听到，说明这个属性应该是正确设置的），否则事件不会从Shadow DOM冒泡到外部DOM树。

内容的提问来源于stack exchange，提问作者Ma224hp