为何JS代码中的CustomEvent始终无法被处理？

你当前的代码无法生效的核心原因是：你在window对象上触发了test自定义事件，但child元素不在window事件的传播路径中。DOM事件的捕获/冒泡机制仅在触发目标的DOM层级链（从document到触发元素，再回溯到document）上生效，跨层级的元素无法直接捕获无关目标的事件。

另外，CustomEvent默认是不冒泡的，即便触发目标和监听元素在同一层级链中，不开启冒泡也无法让后代元素监听到祖先触发的事件。

修正方案 #

方案1：在共同祖先元素上触发事件（开启冒泡） #

如果你的parent和child是同级元素（如当前HTML结构），可以选择它们的共同祖先（比如document.body）作为事件触发目标，并开启冒泡，这样child就能在冒泡阶段捕获到事件：

document.getElementById("parent").addEventListener("click", function() {
  document.body.dispatchEvent(new CustomEvent("test", {
    detail: "Hello",
    bubbles: true // 必须开启冒泡，让后代元素能接收
  }));
});

document.getElementById("child").addEventListener("test", function(event) {
  console.info("收到自定义事件：", event.detail);
});

方案2：直接在目标元素上触发事件 #

如果你的需求是让child专属接收这个事件，最直接的方式就是直接在child元素上触发：

document.getElementById("parent").addEventListener("click", function() {
  document.getElementById("child").dispatchEvent(new CustomEvent("test", {
    detail: "Hello"
  }));
});

document.getElementById("child").addEventListener("test", function(event) {
  console.info("收到自定义事件：", event.detail);
});

方案3：基于父子DOM结构的事件传播 #

如果你的实际场景是child是parent的子元素（可以调整HTML结构），可以在父元素触发事件并开启冒泡，子元素通过冒泡或捕获阶段监听：

调整后的HTML（父子结构）

<button id="parent">Fire
  <div id="child"></div>
</button>

JS代码（冒泡阶段监听）

document.getElementById("parent").addEventListener("click", function() {
  this.dispatchEvent(new CustomEvent("test", {
    detail: "Hello",
    bubbles: true
  }));
});

document.getElementById("child").addEventListener("test", function(event) {
  console.info("冒泡阶段收到事件：", event.detail);
});

或者用捕获阶段监听

捕获阶段会先于冒泡阶段触发，只需在addEventListener的第三个参数传入true：

document.getElementById("child").addEventListener("test", function(event) {
  console.info("捕获阶段收到事件：", event.detail);
}, true);

关键注意点 #

• CustomEvent的bubbles属性默认是false，必须显式设置为true才能让事件在DOM树中冒泡。
• 事件触发目标和监听元素必须处于同一DOM层级链中，才能通过捕获/冒泡机制传递事件。
• 如果不需要事件在DOM中传播，直接在目标元素上触发是最高效的方式。

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