最直接标准的方式是使用 addEventListener 的 once 选项，通过 { once: true } 实现触发一次后自动解绑，现代浏览器普遍支持，无需手动移除且避免闭包引用问题。
JavaScript 中实现事件的一次性绑定并自动解绑，最直接、标准的方式是使用 addEventListener 的 once 选项。它原生支持“触发一次后自动移除监听器”，无需手动调用 removeEventListener，也避免了闭包引用或重复解绑问题。
用 once: true 一次性绑定（推荐）
这是现代浏览器（Chrome 55+、Firefox 50+、Edge 15+、Safari 10+）普遍支持的方案，简洁可靠：
- 在
addEventListener的第三个参数（options 对象）中传入{ once: true } - 事件触发后，浏览器内部自动调用
removeEventListener，彻底清理监听器 - 即使事件被取消（
event.preventDefault()或event.stopImmediatePropagation()），只要事件对象被派发，就视为“已触发”，监听器仍会被移除
示例：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function handler() {
console.log('只执行一次');
}, { once: true });
兼容老浏览器的替代写法（手动封装）
若需支持 IE 或极旧版本，可自行封装一个 once 行为：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 定义一个高阶函数，接收事件类型、处理函数和目标元素
- 内部创建一个包装函数，在首次执行后立即调用
removeEventListener - 注意：必须使用同一个函数引用进行绑定和解绑，所以不能用箭头函数或内联函数
示例：
function addOnce(el, type, fn) {
const wrapper = function(...args) {
fn.apply(this, args);
el.removeEventListener(type, wrapper);
};
el.addEventListener(type, wrapper);
}
// 使用
addOnce(btn, 'click', () => console.log('仅一次'));
不推荐但常见的误区
-
在回调里调用
removeEventListener时传错函数引用：比如用箭头函数或匿名函数绑定，就无法在回调里准确移除——因为每次都是新函数 - 依赖事件冒泡阶段多次触发后手动标记 + 判断：容易漏掉异步场景、事件取消、或多个相同事件并发的情况，逻辑脆弱
-
用
setTimeout延迟解绑：既不精准（可能还没触发就解绑），也不必要
其他适用场景补充
除了 DOM 事件，类似“一次性”语义也可用于：
-
自定义事件（EventTarget）：同样支持
{ once: true } -
Promise 化事件（如
onceClick(el)返回 Promise）：适合 await 等待某次用户操作，常用于表单流程控制 - AbortController 配合事件监听（较重，适用于需统一取消的复杂场景）：不是为“一次”设计，但可作为解绑的集中管理手段
