最直接的办法是改用具名函数或函数引用。匿名函数每次调用生成新引用导致removeEventListener无法匹配，须确保绑定与解绑使用同一函数引用；可用handlers对象缓存引用；推荐AbortController方案，调用controller.abort()自动移除所有关联监听器；避免在循环中直接绑定匿名函数，应使用函数工厂或bind。
最直接的办法是：不使用匿名函数，改用具名函数或函数引用。
把事件处理函数定义成独立函数
匿名函数每次调用都会生成新引用，removeEventListener 无法匹配到原先绑定的函数。只要让绑定和解绑用的是同一个函数引用，就能准确解绑。
- 把处理逻辑写成一个普通函数，比如
handleClick - 绑定时传入函数名（不加括号），如
element.addEventListener('click', handleClick) - 解绑时同样传入该函数名：
element.removeEventListener('click', handleClick)
用对象方式管理多个监听器（适合动态增删场景）
当同一元素需频繁绑定/解绑不同逻辑，或者需要按条件批量控制时，可借助对象缓存函数引用。
- 创建一个对象，如
handlers = {} - 绑定前先定义并存入：
handlers.clickA = () => { /* 逻辑 */ }; - 绑定：
element.addEventListener('click', handlers.clickA) - 解绑：
element.removeEventListener('click', handlers.clickA) - 后续可随时清空整个对象或按 key 删除特定 handler
利用 AbortController（现代浏览器推荐）
这是目前最简洁、语义清晰的方案，尤其适合一次性或条件性监听。
- 创建控制器：
const controller = new AbortController() - 绑定时传入
{ signal: controller.signal }选项 - 解绑只需调用
controller.abort()，所有关联监听器自动移除 - 支持重复调用，也兼容 Promise 等异步流程
避免在循环中直接绑定匿名函数
常见错误是在 for 循环里给多个元素绑定 () => {...}，不仅无法解绑，还容易闭包出错。
- 改用函数工厂：
function makeHandler(data) { return () => console.log(data); } - 或用
bind固定参数：element.addEventListener('click', handler.bind(null, id)) - 更稳妥的做法仍是提前定义好具名函数，再传入循环体
