正确做法是复用同一回调函数引用，避免匿名函数；或使用abortcontroller.signal批量控制监听器。组件销毁时集中清理比零散remove更可靠。

核心办法是：每次添加监听器时，保留对回调函数的同一引用，而不是每次创建新函数；removeEventListener 时用这个相同引用去卸载。

不要在 addEventListener 里写匿名函数或箭头函数

匿名函数每次调用都会生成新实例，即使代码一模一样，它们在内存中也是不同对象，removeEventListener 找不到对应项。

• ❌ 错误写法（每次都是新函数）：

button.addEventListener('click', () => { console.log('done'); });
button.removeEventListener('click', () => { console.log('done'); }); // 不生效

• ✅ 正确写法（复用同一个函数）：

const handleClick = () => { console.log('done'); };
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick); // 能成功卸载

给事件处理函数命名并统一管理引用

尤其适合需要多次增删的场景，比如切换状态、动态绑定等。把处理函数定义在作用域外或作为类成员，确保生命周期内可访问。

jQuery手风琴效果插件j

jQuery手风琴效果插件j-accordion，简洁干净，兼容主流浏览器。

下载

• 把 handler 定义为 class 的属性（this.handleClick），避免重复创建
• 或使用 Map/WeakMap 缓存 handler 引用，按元素或事件类型索引
• 如果 handler 需要闭包参数（如 id），用 bind 或包装函数预先固化，但注意 bind 也会返回新函数——应只 bind 一次并复用

使用 options 中的 signal（现代推荐方式）

利用 AbortController.signal 可以批量控制监听器，无需手动 remove，也彻底规避引用不一致问题。

• 创建 controller：const controller = new AbortController();
• 添加监听器时传入 { signal: controller.signal }
• 卸载时只需 controller.abort()，所有关联监听器自动清除

button.addEventListener('click', handler, { signal: controller.signal });
// ……
controller.abort(); // 一行清空全部

检查是否真的需要 removeEventListener

很多场景其实不需要手动移除：元素被移除 DOM 时，其上的监听器会自动回收；单页应用中，组件销毁前统一清理比零散 remove 更可靠。

• 优先考虑在组件 unmount / destroy 阶段集中清理（如 React useEffect 返回函数、Vue onUnmounted）
• 避免“一边频繁 add，一边盲目 remove”，先理清业务逻辑是否真有冲突