Popover API：事件冒泡在 beforetoggle 事件上不起作用？

Question

背景

参考有关 Popover API 的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/Popover_API（不要与 Bootstrap 的 popover 混淆）。

我有多个弹出窗口，如下所示：

<div id="Popover_1" popover>Content of 1</div>
<div id="Popover_2" popover>Content of 2</div>

如果弹出窗口切换关闭，我试图触发一个函数。我完全理解如何向每个弹出窗口添加事件侦听器，并且它工作得很好。比如：

window.onload = function() {
    const popovers = document.querySelectorAll("[popover]")
    popovers.forEach(popover => {
        popover.addEventListener("beforetoggle", (event) => {
            if (event.newState === "closed") {
                console.log(event);
            }
        });
    });
}

但是，为了简单起见，我想使用

document.addEventListener

来代替，因为无论弹出窗口源如何，我都需要触发相同的函数。我的理解是，由于事件正在冒泡，它应该起作用。我无法得到它。我认识到有些事件不会，但在查看 MDN 时我没有发现它不会。

问题

因此，我的问题是：我的做法是错误的还是 bubble up 不起作用？或者，我对我正在处理的事情有基本的误解吗？

Answer 1

不，该事件不会冒泡，我不确定是什么让您认为它会冒泡，但是如果您查看规格，您可以看到它是在 here 和 here 中触发的，并且在这两种情况下未设置

bubbles

属性（仅针对“打开”情况设置

cancelable

属性）。

但是，您仍然可以捕获该事件以进行委托：

document.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-target]");
  if (!btn) { return; }
  const { target } = btn.dataset;
  document.querySelector(`#Popover_${target}`).togglePopover();
});

document.addEventListener("beforetoggle", (event) => {
  const { newState, oldState, cancelable } = event;
  console.log({ newState, oldState });
}, { capture: true });

<button data-target=1>show 1</button>
<button data-target=2>show 2</button>
<div id="Popover_1" popover>Content of 1</div>
<div id="Popover_2" popover>Content of 2</div>