addEventListener 的 once 选项必须通过配置对象 { once: true } 传入，单独传 true 是 useCapture；它确保监听器仅执行一次且由浏览器自动清理，避免引用不一致问题，但不适用于事件委托或需中途取消的场景。
addEventListener 的 once 选项怎么写才生效
必须显式传入一个对象作为第三个参数，并把 once 设为 true，不能只写 true 或漏掉其他必需字段。常见错误是误以为 addEventListener('click', handler, true) 中的 true 是 once ——其实那是 useCapture，完全无关。
正确写法只有这一种形式：
element.addEventListener('click', handler, { once: true });
-
once必须包裹在配置对象里，单独传布尔值无效 - 配置对象可同时含
once、capture、passive，互不冲突 - 如果监听函数是箭头函数且需在内部移除自身，
once是更安全的选择——避免手动调用removeEventListener时因引用不一致而失败
为什么 once 监听器在事件冒泡中途被移除后仍会触发
这是误解。实际上，once: true 不是“监听器注册后某时刻被删”，而是浏览器底层在**本次事件流完成之后自动清理**，且保证该监听器在整个事件流（捕获 → 目标 → 冒泡）中只执行一次，无论事件是否被 stopPropagation() 中断。
- 即使你在捕获阶段就
event.stopPropagation()，目标阶段和冒泡阶段的同类型监听器不会执行，但once监听器已在捕获阶段执行并自动解绑 - 不存在“移除时机太晚导致多执行”的问题——它不是靠定时或轮询清理，而是由事件分发机制原生保障
- 注意：若同一元素上对同一事件类型注册多个
once监听器，它们彼此独立，各自执行一次后解绑
once 和手动 removeEventListener 的关键区别
核心在于引用一致性要求不同。使用 once 完全规避了“必须用同一个函数引用才能成功移除”的陷阱。
立即学习“前端免费学习笔记（深入）”；
- 手动移除必须确保传给
removeEventListener的函数与addEventListener中的完全相同（包括闭包环境），否则静默失败 -
once由浏览器内部管理，无需你持有函数引用，适合临时回调、一次性初始化逻辑 - 性能上几乎没有差异，但
once减少了代码量和出错概率；不过它无法中途取消——一旦注册，必定执行且仅执行一次 - 兼容性良好：Chrome 55+、Firefox 50+、Safari 10.1+、Edge 15+，IE 完全不支持（需降级为手动移除）
哪些场景下 once 反而会埋坑
它很省心，但不是万能解药。最典型的陷阱是监听动态插入的元素，或依赖事件委托时误用 once。
- 对父元素用事件委托监听子元素点击，又给委托回调加
{ once: true }——结果整个委托逻辑只生效一次，后续插入的新子元素点击完全无响应 - 在单页应用中，对路由容器元素绑定
once监听器来初始化组件，但页面复用该容器时，监听器已消失，导致二次进入无初始化 - 想用
once防抖，比如 “按钮点击后禁用3秒” ——不行。once控制的是监听器生命周期，不是事件响应节奏；应改用状态标记 + 定时器
真正适合 once 的，是明确知道“这件事只需做一次，且时机就在下一次事件发生时”的场景，比如加载完成回调、首次交互引导、资源预热钩子。
