JS 中怎么用 once 配置项让事件监听器只执行一次自动解绑-js教程-PHP中文网

JavaScript 中 addEventListener 的 once: true 选项可让监听器自动在首次触发后移除，无需手动调用 removeEventListener，适用于一次性交互场景，语法简洁且兼容性良好（Chrome 55+等），可与 capture、passive 等选项组合使用。

js 中怎么用 once 配置项让事件监听器只执行一次自动解绑

在 JavaScript 中，可以通过 addEventListener 的 once 选项（布尔值）让事件监听器在首次触发后自动移除，无需手动调用 removeEventListener。

使用 once 配置项的基本写法

once: true 是 addEventListener 第三个参数（options 对象）中的一个属性。它让监听器只响应一次事件，执行完立即解绑。

语法简洁，避免手动管理监听器生命周期
适用于初始化、一次性交互（如首次点击、表单提交、加载完成等）
兼容性良好：Chrome 55+、Firefox 50+、Safari 10.1+、Edge 79+

实际代码示例

比如给按钮添加一个只执行一次的点击监听：

const btn = document.getElementById('myBtn');
btn.addEventListener('click', function handler() {
  console.log('按钮被点击了（仅一次）');
}, { once: true });

后续再点该按钮，handler 不会再执行，也不需要额外写 removeEventListener。

和手动 removeEventListener 的区别

传统方式需保存函数引用并显式解绑，容易出错（如匿名函数无法移除、引用不一致）：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

// ❌ 错误：匿名函数无法 remove
btn.addEventListener('click', () => { /* ... */ });
btn.removeEventListener('click', () => { /* ... */ }); // 不生效
<p>// ✅ 正确但啰嗦
function handleClick() { /<em> ... </em>/ }
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // 必须用同一引用</p>

而 once: true 自动处理，更安全、更简洁。

注意与其他配置项的组合使用

once 可与 capture、passive 等共存，例如：

element.addEventListener('scroll', onScroll, {
  once: true,
  passive: true,
  capture: false
});

但要注意：once 和 passive 没有逻辑冲突，可放心搭配；若同时设 capture: true，事件会在捕获阶段触发一次后解绑。