在 window 下的节点上侦听事件以获取发送到 window 的事件

Question

我有一些代码将事件发送到window ：

let toggleClicked = new Event("generic-toggle-clicked", {
  detail: { isActive: this.isActive },
});
document.dispatchEvent(toggleClicked, { bubbles: true });

我想要window以外的元素来收听事件。 具体来说，是介于window和调度事件的元素（窗口 > 侦听器 > 事件调度器）之间的元素。 我有：

this.addEventListener("generic-toggle-clicked", function () {
  console.log(this);
});

这是我想听事件的元素。 但是，即使将bubbles设置为true ，该元素似乎也没有接收到事件。

Answer 1

答案是，要让事件冒泡，它必须被分派到最里面的节点，而不是最外面的节点。 因此，在上述情况下，这可以解决它：

let toggleClicked = new Event("generic-toggle-clicked", {
  detail: { isActive: this.isActive },
});
this.dispatchEvent(toggleClicked, { bubbles: true });

和

this.addEventListener("generic-toggle-clicked", function () {
  console.log(this);
}, true);