ontoggle 事件仅支持 <details> 元素，其他元素绑定无效；它在 open 属性切换后同步触发且不可取消，不冒泡；支持 ontoggle 属性和 addEventListener('toggle', ...) 两种方式，后者可多监听。
ontoggle 只能用在 <details> 元素上
不是所有元素都支持 ontoggle，它是个专属性质的事件处理器，浏览器只允许绑定到 <details> 元素。给 <div>、<span> 或其他标签加 ontoggle 属性或 JS 监听，完全不会触发——连控制台警告都不会有，纯粹静默失效。
原因在于：HTML 规范里 toggle 事件是 <details> 的专属生命周期事件，仅在其 open 属性切换时同步派发。其他元素没有这个语义和底层机制支撑。
用 ontoggle 属性还是 addEventListener('toggle', ...)
两者都能用，但行为有关键差异：
-
ontoggle属性只能绑定一个函数，重复赋值会覆盖前一个 -
addEventListener('toggle', ...)支持多个监听器共存，更利于模块化或第三方代码介入 -
ontoggle属性写在 HTML 里，适合简单逻辑（比如记录日志）；JS 中监听更适合需要访问上下文或异步操作的场景 - 注意：
toggle事件不冒泡，所以不能委托到父级处理
示例对比：
<details ontoggle="console.log('状态变了')">
<summary>点我</summary>
内容区
</details>
等价于 JS：
document.querySelector('details').addEventListener('toggle', () => {
console.log('状态变了');
});
toggle 事件触发时机与 open 状态的关系
事件在用户点击 <summary> 或脚本调用 element.open = true/false 后立即触发，但此时 open 属性**已经更新完成**。也就是说，在事件回调里读 event.target.open 就是最新值，不用延迟或判断。
常见误判点：
- 以为事件发生在展开“过程中”——其实它是同步的、原子性的状态切换通知
- 试图在事件里阻止默认行为（
event.preventDefault()）——无效，toggle事件不可取消 - 混淆
click和toggle：用户点<summary>会先触发click，再触发toggle；但脚本修改open属性只触发toggle，不触发click
兼容性与 polyfill 注意事项
<details> 和 toggle 事件在 Chrome 12+、Firefox 49+、Safari 12.1+、Edge 79+ 均原生支持。IE 完全不支持，且无标准 polyfill 能完美复现 toggle 事件语义。
如果必须兼容老浏览器：
- 不要依赖
toggle事件做核心功能（比如权限校验、状态持久化），应降级为监听click+ 手动维护open状态 - 避免用
ontoggle属性写法，因为 IE 会把它当成普通 HTML 属性解析，造成 DOM 污染 - 检测支持性用
'toggle' in document.createElement('details')，而不是查HTMLElement.prototype.hasOwnProperty('ontoggle')（后者在部分旧版 Safari 返回 false，但实际可用）
真正容易被忽略的是：服务端渲染时若预设 open 属性，首次加载不会触发 toggle 事件——它只响应后续的用户或脚本触发的状态变更。
