JavaScript 中 addEventListener 怎么通过 once 选项实现事件只执行一次-js教程-PHP中文网

addEventListener 的 once 选项可使监听器在首次触发后自动移除，无需手动清理；它是布尔型配置项，设为 true 即生效，支持与其他 options（如 capture、passive）共存，现代浏览器全覆盖。

javascript 中 addeventlistener 怎么通过 once 选项实现事件只执行一次

JavaScript 中 addEventListener 的 once 选项，是让事件监听器在首次触发后自动移除的最简洁方式——无需手动调用 removeEventListener，也不依赖闭包或标志位。

once 是一个布尔型配置项

它属于 addEventListener 的第三个参数（options 对象），设为 true 即表示该监听器只响应一次事件：

事件触发后，监听器立即被内部自动清理，后续同类型事件不会再进入该回调
即使多次点击、输入或滚动，回调函数也仅执行一次
与手动调用 removeEventListener 相比，更安全（避免因引用不一致导致移除失败）

基本写法示例

比如为按钮绑定一个只响应首次点击的监听器：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => {
  console.log('只输出一次');
}, { once: true });

once 和其他选项可以共存

once 可与其他 options（如 capture、passive）组合使用，顺序无关：

{ once: true, capture: true }：捕获阶段触发一次
{ once: true, passive: true }：适用于滚动/触摸等需提升性能的场景，且只响应一次
注意：passive 和 once 同时使用是完全合法且常见的

不支持 IE，但现代浏览器全覆盖

once 选项自 Chrome 55、Firefox 50、Safari 10、Edge 79 起已支持。若需兼容 IE，可改用封装函数模拟 once 行为，但绝大多数新项目无需降级处理。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南