我正在尝试启动自定义事件并通过子元素捕获它,但这似乎不起作用。我错过了什么(我知道无 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" />
问题是因为您已将
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" />