要正确移除具名函数绑定的事件监听，必须使用同一函数引用和完全一致的事件选项；重新声明同名函数、动态创建函数或options不匹配均会导致移除失败。
要正确移除具名函数绑定的事件监听，关键在于：传给 removeEventListener 的函数引用必须和 addEventListener 中传入的完全一致——不能是同名但重新声明的函数，也不能是箭头函数或匿名函数。
必须使用同一个函数引用
具名函数本身不是“名字生效”，而是函数对象的内存引用起作用。只要两次用的是同一个函数变量，就能成功移除：
function handleClick() {
console.log('clicked');
}
<p>// ✅ 正确：同一引用
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick); // 成功移除
如果重新声明同名函数，即使内容一样，也是不同引用，无法移除：
function handleClick() { console.log('A'); }
button.addEventListener('click', handleClick);
<p>function handleClick() { console.log('B'); } // 新函数，覆盖旧引用
button.removeEventListener('click', handleClick); // ❌ 移除失败（移的是新函数）
避免在循环或回调中动态创建具名函数
以下写法看似具名，实则每次都是新函数，removeEventListener 无效：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 在 for 循环里声明函数（每次迭代都新建）
- 在事件处理逻辑中重新定义再绑定
- 用
function表达式赋值给变量但未复用（如const fn = function handler(){}每次都不同）
✅ 正确做法：把函数定义在作用域外，或提前声明并复用变量：
const handler = function() { /* ... */ };
<p>list.forEach((btn, i) => {
btn.addEventListener('click', handler);
// 后续可统一移除：btn.removeEventListener('click', handler)
});
注意事件选项（capture、once、passive）必须一致
removeEventListener 要求第三个参数（options 或 useCapture）与添加时完全相同。否则匹配失败，静默不移除：
- 如果添加时用了
{ capture: true }，移除时也得传同样对象（注意对象引用不等价，建议用常量或重复字面量） - 如果添加时写了
true表示捕获阶段，移除时也要传true -
once: true的监听器触发后自动移除，无需手动调用removeEventListener
const opts = { capture: true, passive: false };
el.addEventListener('scroll', onScroll, opts);
el.removeEventListener('scroll', onScroll, opts); // ✅ 必须用同一个 opts 对象或相同字面量
调试技巧：确认是否移除成功
没有报错不代表移除成功。可借助以下方式验证：
- 在事件处理函数开头加
console.count('handler')，看点击后是否还计数 - 用浏览器开发者工具 → Elements → Event Listeners 面板，查看目标元素上是否还有该监听器
- 临时在 handler 内打印
this或闭包变量，确认是否仍是预期上下文
移除失败最常见的原因是：函数引用不一致、options 不匹配、作用域弄错（比如绑在子元素却试图从父元素移除）。
