once 选项在现代浏览器（Chrome 55+、Firefox 50+、Safari 10+、Edge 15+）中可靠，但 IE 完全不支持且无完美 polyfill；它仅对同一函数引用生效，箭头函数或匿名函数会导致失效，语义清晰但需注意事件委托、异步操作及框架封装差异。
addEventListener 的 once 选项到底靠不靠谱
靠，但只在现代浏览器中可靠。Chrome 55+、Firefox 50+、Safari 10+、Edge 15+ 支持 once: true；IE 完全不支持，且无 polyfill 能完美模拟（因为底层事件移除时机和监听器执行顺序无法完全复现）。如果你的项目还要兼容 IE，别指望它，老老实实用手动 removeEventListener。
为什么不能只写 once: true 就完事
once 看似简单，但实际踩坑点不少：它只对「同一个函数引用」生效；如果用箭头函数或内联函数声明监听器，once 会失效——不是报错，而是根本不会自动清理，因为每次都是新函数。
- ✅ 正确：用具名函数或变量存住的函数引用
function handleClick() { console.log('fired'); }<br>btn.addEventListener('click', handleClick, { once: true }); - ❌ 错误：箭头函数或匿名函数
btn.addEventListener('click', () => { ... }, { once: true }); // 第二次点击仍可能触发（尤其在快速连续点击时，因事件队列与清理时机偏差） - ⚠️ 注意：
once不影响事件捕获阶段行为，{ once: true, capture: true }是合法组合，但捕获/冒泡各算一次独立监听，别混用搞错阶段
once 和手动 removeEventListener 的性能与语义差异
语义上，once 更清晰：你声明“我就要这一次”，浏览器原生保证清理；手动移除则需自己维护引用、确保移除时机（比如不能在事件处理函数里还没执行完就移除自己，否则可能漏掉 stopPropagation 或 preventDefault 的调用）。
- 性能上差别极小，现代引擎对
once有优化，比 JS 层手动查找并删除监听器略快 - 但若监听器里要异步操作（比如
fetch后再做点啥），once不会等异步完成才清理——它只管同步执行完就删。这时候你得自己控制逻辑，别误以为“只要加了once，后续代码就不会再跑” - 调试时注意：DevTools 的 Event Listeners 面板里，带
once的监听器在触发后立刻消失，不像手动移除那样能被你“看到移除动作”
哪些场景下 once 反而会埋雷
最典型的是动态 DOM + 事件委托组合。比如你在 document 上监听 click 并用 once，本意是“用户第一次点击任意按钮时触发”，但实际是“整个 document 的 click 监听器只触发一次”——之后所有点击（包括其他按钮）全失效。
- ❌ 错误用法：
document.addEventListener('click', handler, { once: true })用于“首次点击某类元素” - ✅ 正确思路：用事件委托 + 条件判断 + 手动标记，或把
once绑在具体目标元素上（如button.addEventListener(..., { once: true })） - ⚠️ 特别注意：Vue/React 等框架的事件绑定不直接走
addEventListener，它们的@click.once或onClick回调里加once是框架层模拟，行为和原生不完全等价（比如 React 里它只是设个 flag，不真正调用原生removeEventListener）
