details元素支持toggle事件，需用addEventListener('toggle', handler)监听，仅用户点击时触发，JS修改open属性不触发，且不冒泡、不可内联绑定。
HTML 中没有 toggle 事件
直接在 addEventListener 里写 'toggle'，浏览器会静默失败（不报错但不触发）——因为标准 DOM 事件里压根没有叫 toggle 的原生事件。你真正想用的，通常是两种情况：details 元素的展开/收起，或者自己手动触发的切换逻辑。
details 元素的 toggle 本质是 toggle 事件（仅限该元素）
只有 <details></details> 元素在用户点击时会派发 toggle 事件（HTML Living Standard 已标准化）。其他元素（如 <div>、<code><button></button>）加 addEventListener('toggle', ...) 完全无效。
正确用法：
<details>
<summary>点我展开</summary>
这里是隐藏内容
</details>
<script>
document.querySelector('details').addEventListener('toggle', (e) => {
console.log('当前是否展开：', e.target.open);
});
</script>
-
e.target.open是布尔值，true表示刚展开，false表示刚收起 - 该事件只在用户交互时触发，通过 JS 直接改
open属性（如el.open = true）不会触发 - 兼容性良好（Chrome 12+、Firefox 49+、Safari 17.4+、Edge 108+）
普通元素要“切换行为”，得自己绑定 click + 管理状态
绝大多数场景下，所谓“toggle 事件”其实是开发者对「点击后切换某状态」的简写说法。这不是事件，而是逻辑。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见错误写法：button.addEventListener('toggle', handler) → 不会执行。
正确做法（以开关按钮为例）：
<button id="myBtn">切换状态</button>
<script>
const btn = document.getElementById('myBtn');
let isActive = false;
btn.addEventListener('click', () => {
isActive = !isActive;
btn.textContent = isActive ? '已启用' : '已禁用';
// 后续可 emit 自定义事件、更新 class、调用 API 等
});
</script>
- 别依赖不存在的事件名，用
click（或keydown等）捕获动作，再在回调里做状态翻转 - 状态变量（如
isActive）必须显式维护，不能指望浏览器自动给你存 - 如果多个地方需要响应这个切换，可以配合
dispatchEvent(new CustomEvent('statechange', { detail: { active: isActive } }))
为什么有人误以为有全局 toggle 事件？
混淆来源主要有三个：
- jQuery 时代有
.toggle()方法（早已废弃），让人产生“toggle 是事件”的错觉 - 某些 UI 库（如 Bootstrap Collapse）文档里说 “toggle the collapse”，实际底层仍是监听
click+ 切换aria-expanded和 class - 控制台打
console.dir(event)时看到type: "toggle"，但那只是<details></details>元素独有的特例，不是通用机制
真要用“切换”语义，优先选 <details></details>（语义化、无障碍友好、自带动画），否则老老实实用 click + 状态变量 —— 没有捷径，也别封装成“addToggleListener”这种伪抽象，容易让后续接手的人踩坑。
