HTML无原生toggle事件；checkbox/radio应监听change事件获取真实状态变化；非表单元素需用aria-expanded或data-state维护状态并手动触发CustomEvent('toggle')。
HTML 本身没有 toggle 事件，所谓“自定义 toggle 事件”本质是监听元素状态变化（比如 checked、open、aria-expanded）并手动触发逻辑，不是注册一个叫 toggle 的原生事件。
怎么监听 checkbox/radio 的“切换”行为
用户点击 <input type="checkbox"> 时，change 事件最可靠——它只在真实状态改变后触发，比 click 更准确（例如空格键触发、JS 赋值都不会误触发）。
注意：不要用 click 监听 checkbox 切换，因为用户可能用键盘操作（空格键），或 JS 直接改 checked 属性，此时 click 不会触发，但 change 会。
-
change事件在用户交互或脚本修改checked后触发（只要值真变了） - 若需兼容旧版 IE，注意 IE8- 不支持
change在 checkbox 上的冒泡，建议绑定到元素本身而非父容器 - 避免在
change回调里再手动赋值checked，否则可能造成状态和 UI 不一致
<input type="checkbox" id="notify">
<label for="notify">开启通知</label>
<p><script>
document.getElementById('notify').addEventListener('change', function() {
console.log('当前状态：', this.checked); // true / false
});
</script>如何让非表单元素（如 div）支持“toggle”语义
对 <div>、<code><button></button> 等元素，浏览器不提供内置 toggle 行为，必须靠 JS 维护状态并模拟。关键不是“发事件”，而是“维护状态 + 触发自定义事件”。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
推荐用 aria-expanded 或 data-state 属性显式标记状态，并在每次点击时翻转它：
- 用
dataset.state存状态比布尔变量更易调试（DOM 可见） - 触发
CustomEvent('toggle')是可选的，仅当你需要解耦或让父组件监听时才必要 - 别忘了同步更新 ARIA 属性（如
aria-expanded="true"），这对屏幕阅读器很重要
<button id="menu-toggle" aria-expanded="false">菜单</button>
<p><script>
const btn = document.getElementById('menu-toggle');
btn.addEventListener('click', () => {
const isExpanded = btn.getAttribute('aria-expanded') === 'true';
const newState = !isExpanded;
btn.setAttribute('aria-expanded', newState);
btn.dataset.state = newState ? 'on' : 'off';</p><p>// 可选：派发自定义事件，供其他模块监听
btn.dispatchEvent(new CustomEvent('toggle', {
detail: { expanded: newState }
}));
});
</script>为什么不能直接 element.addEventListener('toggle', ...)
因为 toggle 不是 HTML 或 DOM 规范定义的标准事件类型。你写这行代码不会报错，但永远不会触发——浏览器根本不认识这个事件名。
常见误解来源：某些 UI 库（如 Bootstrap）的 JS 插件内部有 toggle() 方法，但它只是普通函数调用，不是事件；或者有人把 details/summary 的展开行为误认为是 toggle 事件，其实它触发的是 toggle 事件（仅限该元素！），但这是特例，不是通用机制。
-
<details></details>元素确实会触发原生toggle事件，但仅此一种场景，且不可用于其他元素 - 试图用
dispatchEvent(new Event('toggle'))手动触发，对大多数元素无效（无默认行为，也无监听者） - 真正需要“跨组件通信”的 toggle 行为，应统一用自定义事件 + 明确的事件名（如
'sidebar:toggle'），避免重名冲突
最容易被忽略的一点：toggle 的“状态”必须可读、可测、可持久化。如果只靠 JS 变量存状态，刷新就丢；如果只靠 class 切换，又难判断当前是开是关。优先用属性（aria- 或 data-）承载状态，既保留在 DOM 中，又方便 CSS 和 JS 双向读取。
