HTML中没有原生toggle事件，唯一例外是元素（Chrome 120+等新版浏览器支持），其toggle事件在用户点击或修改open属性时触发，e.target恒为自身。
HTML中没有toggle事件
直接说结论：toggle 不是标准 HTML 或 DOM 事件，浏览器原生不派发它。你看到的 toggle 通常来自自定义元素（如 <details></details>）、第三方组件库（比如 Bootstrap 的 Collapse），或是开发者手动用 dispatchEvent 触发的自定义事件。
元素的 toggle 事件怎么监听
<details></details> 是唯一一个浏览器原生支持 toggle 事件的 HTML 元素（Chrome 120+、Firefox 124+、Safari 17.4+ 支持）。它的触发目标就是该 <details></details> 元素本身：
<details id="my-details">
<summary>点我展开</summary>
<p>隐藏内容</p>
</details>
<script>
document.getElementById('my-details').addEventListener('toggle', (e) => {
console.log('触发目标是：', e.target); // 就是 <details> 元素
console.log('是否已展开：', e.target.open);
});
</script>
-
e.target恒为当前<details></details>元素，不是<summary></summary> - 该事件在用户点击
<summary></summary>或调用element.open = !element.open时触发 - 注意：IE 和旧版 Safari 完全不支持，需检查
'ontoggle' in document.createElement('details')
其他“toggle”行为实际监听的是什么事件
绝大多数所谓“toggle事件”其实是开发者对状态切换的抽象，底层依赖的是更基础的事件：
立即学习“前端免费学习笔记（深入）”；
- 点击按钮切换类名？监听
click，然后查el.classList.contains('active') - 复选框切换？监听
change，读checkbox.checked - 自定义组件 emit('toggle')？那是框架/库内部逻辑，需看其文档——比如 Vue 组件可能用
@toggle，React 可能用onToggle回调 - 用
new CustomEvent('toggle')手动触发？那必须自己保证e.target被正确设置（默认是 dispatch 的那个节点）
为什么 console.log(e) 看不到 target？
常见错觉：在控制台里只打 console.log(e)，展开后发现 target 显示为 null 或 undefined。这是因为：
- 事件对象是异步打印的，而
e.target在事件处理函数执行完后可能被清理（尤其在 Shadow DOM 或某些框架中） - 更可靠的做法是立刻提取关键字段：
console.log('target:', e.target, 'type:', e.type) - 或者用断点调试，别依赖 console 展开实时对象
真正容易被忽略的点是：别预设存在 toggle 事件，先确认你操作的到底是不是原生 <details></details>，还是某个封装过的“toggle 按钮”——后者的行为完全由其实现决定，和 DOM 标准无关。
