主页 / coding / 问题 / 78801774
Accepted
vladimir_1969_2
Asked: 2024-07-27 23:31:36 +0800 CST

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

  • 772

我尝试启动自定义事件并通过子元素捕获它，但似乎不起作用。我遗漏了什么（我知道无 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" />

javascript

1 个回答

  1. Best Answer

    问题是因为您已将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" />

    • 2

相关问题