addeventlistener 的 once 选项通过 { once: true } 传入，事件触发后浏览器自动解绑；不支持内联 onclick 属性；兼容主流浏览器；相比手动 removeeventlistener 更可靠、高效，适用于防重复提交等严格限次场景。
addEventListener 的 once 选项怎么用
直接传 { once: true } 作为第三个参数，事件触发后自动解绑，不用手动调 removeEventListener。
常见错误是把 once 写成字符串 "once" 或布尔值放错位置；也有人误以为它适用于内联 onclick 属性——其实不支持。
-
addEventListener("click", handler, { once: true })是唯一有效写法 - 箭头函数或匿名函数也能用，但要注意：若需后续手动移除，就不能依赖
once，得保留函数引用 - 兼容性没问题：Chrome 55+、Firefox 50+、Safari 10.1+、Edge 79+ 都支持
为什么 onclick="handler()" 不支持 once
HTML 内联事件属性（如 onclick、onsubmit）只接受 JavaScript 表达式或函数调用，不解析选项对象。浏览器根本不会识别 once 这类配置项。
想实现“点一次就失效”，硬套内联写法只能临时 hack，比如在 handler 里加个标记位：if (clicked) return; clicked = true; ——但这是退化方案，绕开了原生机制。
- 内联写法本质是创建一个匿名包装函数，无法注入
once行为 - Vue/React 等框架的
@click.once是语法糖，底层仍是调用addEventListener并传{ once: true } - 如果必须用内联，优先考虑迁移到
addEventListener写法
once 和手动 removeEventListener 的区别
表面效果一样，但行为时机和可靠性不同：once 是浏览器原生保障，在事件回调执行完毕后立即清理监听器；而手动移除依赖你记得调、且传入的函数引用必须完全一致。
容易踩的坑是：用匿名函数绑定，又试图用另一个匿名函数去移除——这必然失败，因为函数引用不等。
-
once不受函数引用是否保存的影响，天然防错 - 手动移除在异步场景下容易出问题，比如
setTimeout延迟移除，期间事件可能被重复触发 -
once对性能更友好：省去一次哈希查找和引用比对（浏览器内部优化）
哪些场景必须用 once 而不是靠逻辑控制
当事件响应必须严格限次、且不能容忍任何竞态风险时，比如初始化加载、防重复提交、资源释放钩子。
单纯在 handler 里加 return 或状态标记，挡不住并发触发（例如快速连点 + Promise 未 resolve 完就又点了一次）。
- 表单提交按钮：防止用户狂点导致多次请求，仅靠
disabled可能被绕过或样式异常 - 滚动监听：配合
IntersectionObserver初始化后只需响应一次进入视口 - 动态插入的节点：用
once绑定加载完成回调，避免因节点复用导致重复绑定
once 是浏览器级的原子操作，不是业务层的条件判断。只要注册了，就绝对只执行一次——这点没法用 JS 逻辑 100% 模拟。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
