addEventListener 的 once 选项如何工作
once: true 会在事件触发后自动移除该监听器,确保回调只执行一次。实现方式是调用 element.addeventlistener(type, listener, { once: true }),浏览器内部会包装原始函数,在首次执行后从内部注册表中注销它。

捕获阶段与冒泡阶段的 once 行为差异
在捕获或冒泡阶段使用 once: true 时,监听器同样只触发一次即被移除。若同时注册捕获和冒泡监听器,它们各自独立计数,互不影响。例如先注册捕获阶段的一次性监听器,再注册冒泡阶段的一次性监听器,两个阶段各执行一次后均被移除。

const btn = document.getElementById('myBtn');
// 捕获阶段一次性监听
btn.addEventListener('click', (e) => {
console.log('Capture once:', e.eventPhase);
}, { once: true, capture: true });
// 冒泡阶段一次性监听
btn.addEventListener('click', (e) => {
console.log('Bubble once:', e.eventPhase);
}, { once: true, capture: false });
// 模拟点击
btn.click();
// 输出:
// Capture once: 1
// Bubble once: 3
基于 once: true 移除后的状态验证
当 once: true 的监听器执行完毕后,再次触发相同事件不会再次调用该回调。可以通过检查 EventTarget 的内部状态或尝试手动移除已不存在的监听器来验证。实际测试中,第二次点击按钮不会输出任何内容,证明监听器已被自动清理。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











