javascript - html5细节节点状态变化的事件监听器

Question

我正在尝试添加一个事件侦听器来检测 HTML5 详细信息节点状态的变化。

最初，我尝试将侦听器附加到打开和关闭事件，因为对我来说，让详细信息节点拥有这些侦听器是合乎逻辑的，但它没有，而且我在 html5 规范中没有看到任何提及它们。

我尝试（在 Google Chrome 中）更改事件，因为 html5 规范（和 Inspect Element 确认）打开和关闭详细信息的方法是添加/删除 open 属性。我希望节点获得/丢失属性会触发更改事件，但显然它不会。

我到底如何从细节节点的状态变化中触发脚本操作？

Answer 1

您是否尝试过使用DOMAttrModified 突变事件？

Answer 2

侦听 DOMAttrModified 适用于许多浏览器，而 DOMSubtreeModified 适用于基于 Chromium 的浏览器，但现在有一个更具体的事件可用于在details节点上侦听：

当您想要检测节点是否打开或关闭时，您可以添加侦听器/处理节点的切换事件。所以不能取消明细节点内容的打开或关闭。detailsdetails

此示例选择details它可以在文档中找到的第一个节点。考虑一些其他查询选择器，document.querySelectorAll('details')甚至是一些 js 框架来在多个details节点上设置事件（即$('details').on('toggle', <function here>).

document.querySelector('details').addEventListener('toggle', 
    function afterToggle(e) { 
        if(e.target.open){
            //do something when opened
        }
        else {
            //do something when closed
        }
    }
);