Question

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

最初我尝试将一个监听器附加到open和close事件，因为对于我来说，一个详细信息节点有这些监听器的逻辑意义，但它没有，我在html5规范中没有看到任何提及它们。

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

如何从更改详细信息节点的状态触发脚本操作？

Answer 1

您是否尝试使用DOMAttrModified mutation event？

Answer 2

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

当您想检测 details 节点是打开还是关闭时，您可以为 details 节点添加一个监听器/处理 toggle event。因此无法取消详情节点内容的开启或关闭。

此示例选择它可以在文档中找到的第一个 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
        }
    }
);

html5的事件监听器详细说明了节点状态的变化

2 个答案: