HTML中没有原生toggle事件，仅元素点击时自动触发可监听的toggle事件；其他元素无效，应使用状态变量、checkbox或CustomEvent实现切换逻辑。
HTML里没有原生toggle事件
直接在HTML中写 onclick="toggle()" 或监听 toggle 事件是无效的——浏览器根本不认识这个事件名。HTML标准事件列表里没有 toggle，它只在特定元素（比如 <details></details>）上作为**自定义触发行为**存在，且不能被JS直接 addEventListener('toggle', ...) 监听（除非是 <details></details> 元素）。
是唯一能自然触发toggle事件的HTML元素
只有 <details></details> 元素在用户点击其 <summary></summary> 时，会自动派发一个 toggle 事件，且该事件**可被监听**：
<details>
<summary>点我展开</summary>
这是隐藏内容
</details>
<script>
document.querySelector('details').addEventListener('toggle', (e) => {
console.log('open 状态：', e.target.open); // true 表示已展开
});
</script>
-
toggle事件只在<details></details>上有效，其他标签（如<div>、<code><button></button>）加了也无反应 - 该事件不冒泡，无法委托到父容器监听
- 不能用
dispatchEvent(new Event('toggle'))手动触发来模拟用户交互（浏览器会忽略）
想实现“切换状态”逻辑？别等toggle，自己控制
绝大多数场景下，所谓“触发 toggle”，其实是想切换某个状态（显/隐、开/关、选中/未选中）。这时候应该绕过事件机制，直接操作状态和DOM：
<button id="myToggle">切换显示</button>
<div id="target" style="display:none">目标内容</div>
<script>
const btn = document.getElementById('myToggle');
const target = document.getElementById('target');
let isVisible = false;
btn.addEventListener('click', () => {
isVisible = !isVisible;
target.style.display = isVisible ? 'block' : 'none';
// 同时可触发自定义事件，供其他模块响应
target.dispatchEvent(new CustomEvent('visibilitychange', { detail: { visible: isVisible } }));
});
</script>
- 用布尔变量（如
isVisible）记录当前状态，比依赖事件更可控 - 避免用
display: none/block切换时重排问题？可改用hidden属性或 CSS class 控制 - 需要通知其他模块？发
CustomEvent比硬绑toggle更可靠、可读性更强
用checkbox模拟toggle行为最稳妥
如果目标是“开关式交互”，<input type="checkbox"> 天然带状态和事件，比手写逻辑更健壮：
立即学习“前端免费学习笔记（深入）”；
<label>
<input type="checkbox" id="themeToggle">
开启暗色模式
</label>
<div id="app">页面内容</div>
<script>
document.getElementById('themeToggle').addEventListener('change', (e) => {
document.body.classList.toggle('dark', e.target.checked);
});
</script>
-
change事件在用户操作后稳定触发，不会因快速连点丢失状态 - 表单控件自带无障碍支持（screen reader 可识别），
<details></details>和手写按钮都不如它原生友好 - 状态由浏览器维护（
e.target.checked），无需额外变量，也不怕异步更新错乱
