自定义事件（CustomEvent）必须在同一目标元素或其祖先/后代节点上触发与监听，否则无法捕获；本文详解事件目标匹配原理、正确分发方式及常见误区。
自定义事件（customevent）必须在**同一目标元素或其祖先/后代节点**上触发与监听，否则无法捕获；本文详解事件目标匹配原理、正确分发方式及常见误区。
在 DOM 中使用 CustomEvent 时，一个常见却易被忽视的核心原则是：事件的监听目标（addEventListener 所绑定的元素）必须与事件的派发目标（dispatchEvent 调用的对象）一致，或处于其事件流路径中（如父/子元素，且事件支持冒泡）。
你原始代码的问题在于：
- 在
#parent的点击回调中，调用了window.dispatchEvent(...)，即把"test"事件派发给了window对象； - 却在
#child元素上监听"test"事件 ——#child并非window的子元素（事件流中无继承关系），也不监听window上的事件，因此永远不会响应。
✅ 正确做法是：让事件在语义相关的 DOM 节点上触发与接收。例如，若希望点击按钮后通知子容器，应将事件派发给该子容器本身（或其父容器，并确保事件可冒泡）：
<button id="parent">Fire</button> <div id="child"></div>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// 点击按钮时，向 child 元素派发自定义事件
parent.addEventListener("click", () => {
child.dispatchEvent(new CustomEvent("test", {
detail: "Hello",
bubbles: false, // 默认为 false；如需向上冒泡至父级，设为 true
cancelable: false
}));
});
// 在 child 上监听，精准匹配目标
child.addEventListener("test", (e) => {
console.info("Received:", e.detail); // 输出：Received: Hello
});? 关键注意事项：
-
CustomEvent默认不冒泡（bubbles: false），若想在父元素监听，需显式设置bubbles: true，并在父元素添加监听器； -
window、document、自定义 DOM 元素均为合法事件目标，但监听必须「对口」——不能在div上监听window发出的事件； - 避免滥用全局对象（如
window）作为事件总线，这会降低可维护性，也违背 DOM 事件的设计本意；推荐使用组件内通信或EventTarget实例封装。
? 进阶提示：如需跨组件松耦合通信，可创建独立的事件总线：
const eventBus = new EventTarget();
eventBus.addEventListener("test", e => console.log(e.detail));
eventBus.dispatchEvent(new CustomEvent("test", { detail: "From bus" }));总之，CustomEvent 不是“广播”，而是基于 DOM 树结构的定向消息传递机制。理清事件目标（target）、监听目标（listener target）与事件流（capture/bubble phase）三者关系，是解决“事件未触发”问题的根本。
