为什么 CustomEvent 在 JS 代码中仍未处理

Question

我正在尝试启动自定义事件并通过子元素捕获它，但这似乎不起作用。我错过了什么（我知道无 DOM 解决方案，但需要让它与 DOM 一起工作）？

我尝试了一些不同的选项，包括交换子级和父级以消除潜在的冒泡/隧道问题，尝试了遗留的事件类，但似乎都不起作用。

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



document.getElementById("child").addEventListener("test", function(event) {
  console.info("Hello");
});

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

Answer 1

问题是因为您已将

test

事件侦听器分配给

#child

元素，但您却针对

window

触发了它。

要解决此问题，请侦听您引发事件的元素或其父元素之一的事件。

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

parent.addEventListener("click", () => {
  child.dispatchEvent(new CustomEvent("test", {
    detail: "Hello"
  }));
});

child.addEventListener("test", e => {
  console.info(e.detail);
});

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