HTML无原生toggle事件；checkbox/radio应监听change事件获取真实状态变化；非表单元素需用aria-expanded或data-state维护状态并手动触发CustomEvent('toggle')。
HTML 本身没有 toggle 事件，所谓“自定义 toggle 事件”本质是监听元素状态变化（比如 checked、open、aria-expanded）并手动触发逻辑，不是注册一个叫 toggle 的原生事件。
怎么监听 checkbox/radio 的“切换”行为
用户点击 时，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></p>
如何让非表单元素（如 div）支持“toggle”语义
对 推荐用 实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。 因为 常见误解来源：某些 UI 库（如 Bootstrap）的 JS 插件内部有 最容易被忽略的一点：toggle 的“状态”必须可读、可测、可持久化。如果只靠 JS 变量存状态，刷新就丢；如果只靠 class 切换，又难判断当前是开是关。优先用属性（ 等元素，浏览器不提供内置 toggle 行为，必须靠 JS 维护状态并模拟。关键不是“发事件”，而是“维护状态 + 触发自定义事件”。aria-expanded 或 data-state 属性显式标记状态，并在每次点击时翻转它：
dataset.state 存状态比布尔变量更易调试（DOM 可见）CustomEvent('toggle') 是可选的，仅当你需要解耦或让父组件监听时才必要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';</script></p><p>// 可选：派发自定义事件，供其他模块监听
btn.dispatchEvent(new CustomEvent('toggle', {
detail: { expanded: newState }
}));
});
</p>
为什么不能直接
element.addEventListener('toggle', ...)
toggle 不是 HTML 或 DOM 规范定义的标准事件类型。你写这行代码不会报错，但永远不会触发——浏览器根本不认识这个事件名。toggle() 方法，但它只是普通函数调用，不是事件；或者有人把 details/summary 的展开行为误认为是 toggle 事件，其实它触发的是 toggle 事件（仅限该元素！），但这是特例，不是通用机制。
toggle 事件，但仅此一种场景，且不可用于其他元素dispatchEvent(new Event('toggle')) 手动触发，对大多数元素无效（无默认行为，也无监听者）'sidebar:toggle'），避免重名冲突aria- 或 data-）承载状态，既保留在 DOM 中，又方便 CSS 和 JS 双向读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
