html5事件监听器详细节点状态变化

Event listener for html5 details node state change

本文关键字：节点 状态 变化 细节 事件 监听器 html5      更新时间：2023-09-26

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

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

我尝试了(在Google Chrome)改变事件，因为html5规范(和Inspect Element确认)，打开和关闭细节的方式是添加/删除open属性。我希望节点获得/失去属性将触发更改事件，但显然它没有。

我到底如何触发一个脚本动作的状态变化的细节节点?

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

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

当您想要检测details节点打开或关闭时，可以为details节点添加侦听器/处理切换事件。因此detail节点内容的打开或关闭不能被取消。

本例选择在文档中可以找到的第一个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
        }
    }
);
相关文章：