toggle事件不存在，浏览器不派发该事件；监听details开关状态应使用click事件或新版toggle事件（Chrome/Firefox 120+支持），并确保函数引用一致以正确清理。
toggle 事件根本不存在，别白费劲绑它
HTML 标准里压根没有 toggle 事件。你搜到的“toggle 事件”，基本是混淆了 details/summary 元素的展开收起行为、input[type="checkbox"] 的 change 事件，或是某些 UI 库（如 Bootstrap）自定义的事件名。直接写 addEventListener('toggle', ...) 不会报错但永远不触发——因为浏览器根本不派发这个事件。
details 元素的展开/收起该监听什么
如果你实际想监听的是 <details></details> 的开关状态变化，正确做法是监听其内部 <summary></summary> 的 click，或更稳妥地监听 details 自身的 toggle ——等等，这里要特别注意：虽然 MDN 文档标注为 toggle 事件，但它**仅在 Chrome/Firefox 120+ 等较新版本中支持**，且必须用原生 DOM API 绑定，Vue/React 的 v-on 或 @click 无法捕获它。
- 兼容性写法：监听
details的click，再用event.target === detailsEl+detailsEl.open判断状态 - 现代写法（需确认目标环境）：
detailsEl.addEventListener('toggle', handler)，但必须确保 handler 是同一个函数引用，否则后续无法清理 - 千万别在每次
mounted都重新绑定却不存引用——removeEventListener会失效
如何安全清理监听器防止内存泄漏
清理的关键不是“有没有调用 removeEventListener”，而是“是否传入了和绑定时完全一致的函数引用”。箭头函数、内联函数、每次渲染都新建的函数，全部无法被正确移除。
- 错误示范：
el.addEventListener('click', () => { ... })→ 后续removeEventListener('click', () => { ... })无效 - 正确做法：把 handler 声明为组件 data/methods 中的命名函数，或用
useCallback（React）、useMemo包裹（Vue 3 setup） - 在 Vue 中，优先用
v-if触发组件销毁，比手动清理更可靠；若必须手动，确保在beforeUnmount（Vue 3）或beforeDestroy（Vue 2）中调用removeEventListener - 全局监听（如 document 上的快捷键）务必清理，否则跨路由后监听器仍存在，容易重复绑定
React/Vue 中更推荐的状态替代方案
绝大多数所谓“toggle 场景”本质是状态同步问题，不是事件问题。强行监听 DOM 事件再 setState/useRef 更新 UI，既绕路又易漏清理。
立即学习“前端免费学习笔记（深入）”；
- 对于 checkbox/radio：直接绑定
checked+onChange，状态由 React/Vue 控制，无需监听 DOM 变化 - 对于 details：用
useState或v-model绑定open属性，点击 summary 时更新 state，UI 和逻辑完全受控 - 避免给每个列表项单独绑定 toggle 类事件——改用事件委托 +
event.target.closest()定位，一个监听器管全场
真正容易被忽略的点是：很多开发者以为“只要写了 removeEventListener 就算清理了”，但没验证它是否真的执行成功。建议在 handler 里加个 console.log，或用 Chrome DevTools 的 Event Listeners 面板实时查看绑定情况。
