关键在于确保 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 传入的是**同一个函数引用**，就不会掉进这个坑。
