不能监听 toggle 事件，因为 HTML 规范中不存在该原生事件；应使用 change 事件监听 checkbox 的 checked 状态变化，以确保键盘支持、表单提交和无障碍访问。
toggle 不是 HTML 或原生 DOM 的事件，也不存在 toggle 事件监听机制。试图写 element.addEventListener('toggle', ...) 会静默失败——浏览器根本不认识这个事件。
真正起作用的是 change 事件，它由 在用户切换选中状态时触发。所谓“开关”，只是视觉和交互上的说法，底层永远依赖 checkbox 的 checked 属性变化。
为什么不能监听 toggle 事件
HTML 规范里没有 toggle 事件；MDN、WHATWG 标准、各浏览器文档均无此事件定义。部分人混淆了以下概念：
-
classList.toggle()是 DOM 方法，不是事件 - 某些 UI 库（如 Bootstrap）的
collapse插件有shown.bs.collapse类似命名，但那是自定义事件，非原生 - Web Components 中可自定义
toggle事件，但需手动dispatchEvent，不适用于基础开关控件
正确绑定开关状态变化：用 change 而非 toggle
所有基于 checkbox 的开关，必须监听 change 事件来响应用户操作：
<input type="checkbox" id="dark-mode"><label for="dark-mode">深色模式</label>
JS 部分应这样写：
const toggle = document.getElementById('dark-mode');
toggle.addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
});
- 不要用
click：它在键盘空格触发时可能漏掉（尤其禁用pointer-events后） - 必须用
this.checked判断，而非event.target.checked—— 更安全，避免事件代理时出错 - 若需初始化状态（比如从 localStorage 恢复），记得手动调用一次逻辑，
change不会自动触发
常见错误：把 classList.toggle() 当成事件源
很多人写类似这样的代码：
button.addEventListener('click', () => {
box.classList.toggle('hidden');
});
这实现的是「点击切换类」，但它不是语义化的开关控件——无法被表单提交、不支持键盘空格、屏幕阅读器读不出当前状态。真要用于设置项（如通知开关、两步验证），必须用 input[type="checkbox"]。
- 用
div+classList.toggle()适合纯 UI 展开/收起，不适合表单字段 - 若混用，后端收不到值：checkbox 不提交，
name就不会出现在 FormData 里 - 禁用态失效：给
div加disabled属性无效，而input[disabled]会天然禁用交互并灰显
需要持久化或联动时，别只靠 CSS :checked
CSS 的 input:checked + .slider 可以驱动样式，但做不了业务逻辑：
-
:checked无法触发 API 请求、无法更新 localStorage、无法显示/隐藏其他 DOM 区域（除非用相邻兄弟选择器且结构严格匹配） - 想保存开关状态？得在
change回调里写localStorage.setItem('darkMode', this.checked) - 想联动另一个字段（如开启两步验证后显示备份码）？只能靠 JS 操作
document.getElementById('backup-code').style.display = this.checked ? 'block' : 'none' - 服务端要求显式传
0表示关闭？得配合 hidden input：，且确保它在 checkbox 前面
真实项目里，最易被跳过的其实是键盘支持和禁用态样式同步——它们不报错，但一测无障碍就暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
