HTML中没有全局toggle事件，仅元素原生支持toggle事件，其事件对象无newState属性，需通过e.target.open获取状态；其他场景应使用click、change等标准事件。
HTML中没有toggle事件
直接说结论：toggle 不是标准 HTML 或 DOM 事件，浏览器原生不触发它。你看到的 toggle 通常来自自定义行为（比如 details 元素的展开/收起）或第三方库（如 Bootstrap 的 Collapse），不是全局可监听的事件类型。
details元素的toggle事件能监听，但仅限该元素
details 元素在用户点击 summary 时会触发原生 toggle 事件——这是目前唯一被规范支持的场景（HTML Living Standard）。但它只在该元素上生效，且不冒泡，不能委托。
- 必须用
addEventListener('toggle', handler)显式绑定到 - 事件对象本身没有额外属性，但可通过
event.target.open获取当前状态（true表示已展开） - 不要试图在 document 或 body 上监听
toggle，它不会到达那里
<details id="my-details"><summary>点我展开</summary><p>隐藏内容</p>
</details><script>
document.getElementById('my-details').addEventListener('toggle', (e) => {
console.log('当前是否展开：', e.target.open); // true / false
});
</script>
其他“切换”场景别硬套toggle，改用click或input
Checkbox、radio、开关按钮（）、自定义折叠面板等，本质是状态变更，应监听更可靠、兼容性更好的事件：
-
click：适用于所有可点击的切换控件，简单直接 -
change：对更精准，只在真实状态改变后触发（避免重复 click） -
input：适合实时响应（如切换瞬间就执行逻辑），但注意移动端可能有延迟 - 不要监听
toggle并期望它在 checkbox 上工作——它根本不会触发
例如判断 checkbox 是否被勾选：
<input type="checkbox" id="my-toggle"><script>
document.getElementById('my-toggle').addEventListener('change', (e) => {
console.log('新状态：', e.target.checked); // true / false
});
</script>
自定义toggle逻辑必须手动派发事件
如果你封装了一个折叠组件并想对外暴露 toggle 语义，得自己用 CustomEvent 派发，并明确约定事件名和 payload：
- 推荐用
my-toggle这类带命名空间的名字，避免和未来原生事件冲突 - 把关键状态（如
open: true）放进detail字段，方便监听方读取 - 记得调用
dispatchEvent()，且确保在状态更新后触发
const el = document.querySelector('.my-collapse');
el.addEventListener('click', () => {
const isOpen = el.classList.toggle('open');
el.dispatchEvent(new CustomEvent('my-toggle', {
detail: { open: isOpen },
bubbles: true
}));
});
真正容易被忽略的是：所谓 “toggle 事件” 几乎总是上下文相关的，不存在一个通用、跨元素、开箱即用的 toggle。你得先确认目标元素是否原生支持（目前只有 details），否则就得回归 click/change + 状态判断的老办法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
