Popover API问题：beforetoggle事件为何无法实现事件冒泡？

背景 #

使用原生Popover API（非Bootstrap的popover组件），页面包含多个popover元素：

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

最初给每个popover单独绑定beforetoggle事件监听器，能正常捕获其关闭状态：

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文档未找到该事件不冒泡的明确说明。

问题 #

是实现方式有误，还是beforetoggle事件确实不支持冒泡？或是对事件冒泡概念存在误解？

解答 #

beforetoggle事件确实不支持冒泡，这是原生Popover API的事件特性：

• 该事件和同属Popover API的toggle事件一样，都属于非冒泡事件，只会在触发事件的popover元素本身触发，不会向上冒泡到父元素、document或window层级。
• 目前无法通过事件委托（document级别监听）来捕获这类事件，最简洁有效的方式还是保持原有的遍历绑定逻辑，给每个popover单独添加事件监听器。

部分浏览器的文档可能未明确标注这一特性，但通过实际测试和规范细节可确认这一点。

内容的提问来源于stack exchange，提问作者SaintFrag