HTML 中没有原生 toggle 事件，仅 元素支持该事件，且不冒泡、不可用 ontoggle 属性监听；其他元素需用 click + 状态管理或 CustomEvent 实现切换逻辑。
HTML 中没有原生 toggle 事件
直接说结论：toggle 不是浏览器原生支持的 DOM 事件类型，所以 element.addEventListener('toggle', ...) 会静默失败，不会报错但也不会触发。你看到的 toggle 行为，几乎都来自自定义实现或特定元素（比如 <details></details>）的内置机制。
元素的 toggle 事件是唯一例外
只有 <details></details> 元素在用户点击时会触发原生 toggle 事件——但它不冒泡，且只在该元素上有效：
<details> <summary>点我展开</summary> 这里是隐藏内容 </details>
监听方式必须用 addEventListener，不能用 ontoggle 属性（不支持）：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const details = document.querySelector('details');
details.addEventListener('toggle', (e) => {
console.log('open:', e.target.open); // true 表示刚展开，false 表示刚收起
});
-
toggle事件只在用户交互（点击<summary></summary>）时触发，JS 主动设置open属性不会触发它 - Chrome/Firefox/Edge 支持，Safari 16.4+ 才开始支持（旧版 Safari 完全不触发）
- 不要试图给
<div> 或其他元素绑定 <code>toggle，它不会工作想实现“切换状态”逻辑？别等 toggle，用 click + 状态管理
绝大多数场景下，你真正需要的是“点击后切换某个状态”，比如显隐、开关、折叠面板。这应该由 JS 显式控制，而不是依赖不存在的事件：
立即学习“前端免费学习笔记（深入）”；
<button id="myToggle">切换</button> <div id="content">内容区域</div>
const btn = document.getElementById('myToggle'); const content = document.getElementById('content'); let isOpen = false; btn.addEventListener('click', () => { isOpen = !isOpen; content.style.display = isOpen ? 'block' : 'none'; // 或操作 class、更新 aria-expanded、发自定义事件等 });- 用布尔变量或
dataset（如el.dataset.open = "true"）维护状态，比反复查 DOM 更可靠 - 避免用
getComputedStyle(el).display === 'none'判断状态——它可能被 CSS 覆盖，且开销大 - 如果要复用，封装成函数或自定义 hook（React/Vue 场景下更推荐响应式状态）
需要广播切换行为？发 CustomEvent 替代原生 toggle
当多个模块需响应同一切换动作（比如菜单展开时关闭弹窗），可以用自定义事件解耦：
btn.addEventListener('click', () => { isOpen = !isOpen; content.classList.toggle('active'); // 主动派发 const event = new CustomEvent('my-toggle', { detail: { open: isOpen }, bubbles: true }); btn.dispatchEvent(event); }); // 其他地方监听 document.addEventListener('my-toggle', (e) => { console.log('收到切换通知：', e.detail.open); });- 事件名必须用短横线分隔（如
'ui-menu-toggle'），避免和未来原生事件冲突 -
bubbles: true才能让父级元素通过事件委托捕获 - 别在
CustomEvent里传 DOM 元素引用，容易引发内存泄漏；传必要数据即可
<details></details>的原生能力，也可能是click+ 状态 + class 切换，甚至涉及 ARIA 属性更新。关键不是找那个不存在的通用事件，而是明确你要控制什么、谁需要知道、以及如何让状态可预测。 - 用布尔变量或
