自定义事件监听异常：元素A触发事件，元素B无法监听如何解决？

这个问题我之前也碰到过，核心是对DOM事件传播的逻辑理解有偏差——事件的冒泡（bubbles）是沿着触发元素的祖先链向上传递，完全不会横向扩散到同级元素。你的A和B是兄弟节点，所以A触发的冒泡事件只会一路往上走到body、html，最终到document，永远不会跑到B节点那里，这就是B监听不到、但document能正常触发的原因。

几种可行的解决方案 #

1. 利用共同父元素做事件委托 #

如果A和B有共同的父容器（比如你的例子里的<body>），可以把监听绑定到父元素上，然后在回调里按需触发B的响应逻辑：

var event = new CustomEvent("custom-event", {bubbles:true, detail:"something"});
var eleA = document.getElementById("A");
var eleB = document.getElementById("B");
var parentContainer = document.body;

// 父元素监听A冒泡上来的事件
parentContainer.addEventListener("custom-event", function(e) {
    console.log("custom-event caught in parent", e.detail);
    // 主动给B触发对应的事件
    eleB.dispatchEvent(new CustomEvent("custom-event", {detail: e.detail}));
});

// B监听自己的事件
eleB.addEventListener("custom-event", function(e) {
    console.log("custom-event caught in element B", e.detail);
});

eleA.dispatchEvent(event);

2. 用全局事件总线实现跨元素通信 #

如果DOM结构复杂，或者不想依赖DOM层级关系，推荐自己创建一个事件总线（基于原生EventTarget），让A和B通过这个总线收发事件，完全脱离DOM结构限制：

// 创建全局事件总线
const eventBus = new EventTarget();

var eleA = document.getElementById("A");
var eleB = document.getElementById("B");

// B监听事件总线的自定义事件
eventBus.addEventListener("custom-event", function(e) {
    console.log("custom-event caught in element B", e.detail);
});

// A触发事件总线的事件（这里用click模拟触发，你也可以直接调用）
eleA.addEventListener('click', function() {
    const event = new CustomEvent("custom-event", {detail:"something"});
    eventBus.dispatchEvent(event);
});

// 或者直接触发事件，不需要用户交互
// eventBus.dispatchEvent(new CustomEvent("custom-event", {detail:"something"}));

3. 直接手动触发目标元素的事件 #

如果只是简单的A触发后让B响应，也可以跳过事件传播，直接给B手动触发事件：

var eleA = document.getElementById("A");
var eleB = document.getElementById("B");

eleB.addEventListener("custom-event", function(e) {
    console.log("custom-event caught in element B", e.detail);
});

// A的触发逻辑
eleA.addEventListener('click', function() {
    const event = new CustomEvent("custom-event", {detail:"something"});
    eleB.dispatchEvent(event); // 直接给B发送事件
});

总结 #

DOM的冒泡/捕获机制只在祖先-后代的DOM链上生效，同级或无DOM关联的元素无法通过原生事件传播机制互通。跨元素事件通信优先考虑事件总线方案，灵活且不依赖DOM结构；如果业务逻辑和DOM结构强绑定，用共同父元素的事件委托也能解决问题。

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