关键在于确保 addEventListener 和 removeEventListener 传入同一函数引用：用具名函数、EventListener 对象、闭包缓存或 AbortController 均可实现精准解绑。

关键在于：每次调用匿名函数都会创建一个全新函数实例，removeEventListener 无法匹配到之前 addEventListener 时传入的那一个，所以解绑失败。

用具名函数代替匿名函数

这是最直接、最推荐的做法。把事件处理逻辑封装成独立函数，add 和 remove 时都引用同一个函数名：

• 避免在 addEventListener 中写 () => {...} 或 function() {...}
• 定义一个函数，比如 handleClick = function(e) { ... }，然后 el.addEventListener('click', handleClick)
• 解绑时直接 el.removeEventListener('click', handleClick)，完全匹配

使用 EventListener 对象（含 handleEvent）

把处理逻辑放在对象的 handleEvent 方法中，对象本身可复用：

• 定义对象：const handler = { handleEvent(e) { console.log(e.type); } };
• 绑定：el.addEventListener('click', handler)
• 解绑：el.removeEventListener('click', handler)
• 注意：handler 是同一个对象引用，不会因重复调用而新建

利用闭包缓存函数引用（适合动态参数场景）

如果必须带参数（如 id、索引），不要在 add 时现场生成箭头函数，而是提前生成并保存引用：

• 错误写法：el.addEventListener('click', () => onClick(id)) → 每次都是新函数
• 正确写法：const clickHandler = () => onClick(id); el.addEventListener('click', clickHandler);
• 解绑时用同一个 clickHandler 变量：el.removeEventListener('click', clickHandler)
• 适用于循环中为多个元素绑定不同参数的场景

用 AbortController（现代方案，推荐用于一次性或需集中控制的场景）

借助 signal 选项，无需手动配对 remove，且支持批量取消：

• 创建控制器：const controller = new AbortController();
• 绑定时传 signal：el.addEventListener('click', handler, { signal: controller.signal });
• 解绑只需调用：controller.abort()，所有关联监听器自动移除
• 适合组件卸载、请求取消等生命周期明确的场景

不复杂但容易忽略：只要确保 add 和 remove 传入的是**同一个函数引用**，就不会掉进这个坑。