details元素原生支持toggle事件，但需用addeventlistener('toggle', ...)显式监听，仅用户点击summary时触发，js修改open属性不触发，且不冒泡、不兼容ie、不能内联绑定。
details元素没有toggle事件，别白等了
details 元素原生不触发 toggle 事件。这是很多人查 MDN 或搜“details toggle event”后踩的第一个坑——浏览器根本不会派发这个事件名。Chrome、Firefox、Safari 都只支持监听 toggle 类型的事件，但必须用 addEventListener('toggle', ...) 显式注册，且该事件**仅在用户交互触发状态变化时触发**（JS 修改 open 属性不会触发）。
所以不是事件不存在，而是它：
- 不是冒泡事件（无法委托到父级）
- 不兼容 IE（全系不支持）
- 无法通过
onToggle内联属性绑定 - 必须用
addEventListener，且不能写成ontoggle
正确监听 toggle 事件的写法
核心就一行注册 + 判断 event.target.open：
const details = document.querySelector('details');
details.addEventListener('toggle', (e) => {
if (e.target.open) {
console.log('已展开');
} else {
console.log('已收起');
}
});
注意：
-
e.target是details元素本身，不是summary - 不要依赖
e.detail—— 它始终是undefined - 事件在状态变更后立即触发，此时
details.open已同步更新 - 如果页面有多个
details，建议用事件委托或批量绑定
JS 手动切换 open 属性时事件不触发
这是最常被忽略的边界情况：details.open = true 或 details.setAttribute('open', '') **完全不会触发 toggle 事件**。它只响应用户点击 summary 的行为。
如果你需要统一处理所有开闭逻辑（包括 JS 控制），得自己封装：
- 把开闭操作收敛到一个函数，比如
setDetailsOpen(details, isOpen) - 函数内部先手动设置
open，再手动调用你的回调 - 避免混用原生交互和 JS 控制，否则状态和副作用容易脱节
兼容性与降级建议
toggle 事件在 Safari 15.4+、Chrome 101+、Firefox 98+ 才稳定支持。旧版 Safari 会静默失败（不报错，也不执行回调）。
稳妥做法：
- 用
if ('onbeforetoggle' in HTMLDetailsElement.prototype)检测支持（注意：实际是ontoggle属性不存在，但事件名是toggle；更准的是typeof details.addEventListener === 'function' && 'toggle' in Event） - 不支持时，退回到监听
click并判断summary是否被点中 + 延迟读取open - 避免在
toggle回调里做 heavy work，它在主线程同步执行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
