once: true 是原生支持的可靠方式，让监听器触发一次后自动注销；它绕过 removeEventListener 的函数引用匹配难题，适用于首次交互场景，但 IE 不支持且无法 polyfill。
addEventListener 的 once 选项到底怎么用
直接说结论：once: true 是原生支持的、无需手动移除监听器的可靠方式，只要浏览器支持（Chrome 55+、Firefox 50+、Edge 15+、Safari 10+），它就能让事件监听器在触发一次后自动注销。
为什么不用 removeEventListener 而用 once
手动调用 removeEventListener 需要完全匹配函数引用 —— 匿名函数、箭头函数、或每次新建的函数都会导致移除失败。而 once 绕过了这个陷阱，由浏览器底层保障只执行一次且自动清理。
-
once对应的是监听器生命周期管理，不是“只响应一次”，而是“注册即承诺只执行一次” - 如果事件被
stopPropagation()或stopImmediatePropagation()中断，once仍生效：它不关心是否冒泡完成，只关心本监听器是否被调用过 - 不能和
capture冲突使用 ——{ once: true, capture: true }完全合法，两者互不干扰
once 在哪些场景下最省心
适合所有「预期仅需响应首次交互」的场景，比如初始化按钮点击、表单提交防重复、懒加载触发、模态框打开动画结束回调等。
button.addEventListener('click', () => {
fetch('/api/submit').then(renderSuccess);
}, { once: true });
- 避免用户狂点提交按钮导致多次请求 —— 不用加
disabled，也不用设标志位isSubmitted - 配合
DOMContentLoaded做一次性 DOM 就绪处理时，比document.addEventListener('DOMContentLoaded', handler)更干净（后者若多次注册会累积） - 监听
scroll或resize的首次到达某个条件（如元素进入视口）时，比用IntersectionObserver更轻量（但注意：不要滥用在高频事件上，once不解决节流问题）
容易忽略的兼容性和副作用
IE 完全不支持 once，哪怕你用 Babel 编译也无济于事 —— 它是 EventTarget.prototype 上的原生行为，无法 polyfill。另外，once 不影响事件对象本身，但会影响监听器链：如果多个监听器都设了 once，它们按注册顺序依次触发，各自独立注销。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（SSR）或 Hydration 场景下，若 JS 在 DOM 挂载前就执行了带
once的监听，而对应元素尚未存在，事件根本不会触发，也不会报错 —— 这时候得配合if (el) el.addEventListener(...)安全校验 - 调试时看不到“已注销”的提示，Chrome DevTools 的 Event Listeners 面板里，带
once的监听器在触发后会直接消失，不像手动remove那样还能查到残留痕迹 - 如果监听器内部抛出未捕获异常，
once依然生效：它只管“是否被调用”，不管“是否成功执行完毕”
once；真正该它出场的地方，是那些你本来就要写 removeEventListener 或状态标记，又不想多写几行、多维护一个变量的地方。 
