必须用同一函数引用、相同事件类型和完全一致的选项对象才能成功移除事件监听器，否则导致内存泄漏；匿名函数不可移除；once监听器触发后自动移除，但可提前取消；组件卸载时须及时清理。
用 removeEventListener 移除事件监听，关键在于：**必须传入与 addEventListener 完全相同的函数引用、事件类型和选项（如 once、capture）**。否则移除会失败，监听器持续存在，长期积累就可能引发内存泄漏。
确保使用同一个函数引用
匿名函数无法被移除，因为每次定义都是新函数：
// ❌ 错误：两次传入的匿名函数不是同一个引用
element.addEventListener('click', function() { console.log('hi'); });
element.removeEventListener('click', function() { console.log('hi'); }); // 不生效
✅ 正确做法是把监听函数定义为变量或命名函数：
- 定义具名函数并复用：
function handleClick() { console.log('clicked'); }
element.addEventListener('click', handleClick);
// …… 后续合适时机
element.removeEventListener('click', handleClick);
- 或用箭头函数变量（注意 this 绑定是否符合预期）：
const handleClick = () => console.log('clicked');
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);
注意事件选项必须严格一致
如果添加监听时用了 { capture: true }、{ once: true } 或 { passive: true }，移除时必须传入完全相同的 options 对象（对象引用相等，不是仅内容相同）：
const opts = { capture: true, passive: false };
element.addEventListener('scroll', handleScroll, opts);
// ✅ 正确：复用同一 opts 对象
element.removeEventListener('scroll', handleScroll, opts);
// ❌ 错误：新建对象，即使属性一样也不匹配
element.removeEventListener('scroll', handleScroll, { capture: true }); // 不生效
⚠️ 特别提醒：once: true 的监听器触发后自动移除，无需手动调用 removeEventListener；但若提前想取消它，仍需用相同选项移除。
在组件卸载或元素销毁前及时清理
常见泄漏场景：单页应用中，组件销毁但未解绑全局或父级元素上的事件（如 window、document、滚动容器）。
- React 中推荐在
useEffect清理函数中移除：
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); // 自动执行
}, []);
- 原生 JS 操作 DOM 时，确保有明确的“销毁”逻辑入口，比如组件的
destroy()方法或离开页面前的钩子。
调试技巧：检查监听器是否残留
Chrome DevTools 提供了直接查看元素绑定事件的能力：
- 在 Elements 面板选中目标元素 → 右侧 Event Listeners 标签 → 展开对应事件类型，能看到所有监听器及其源码位置；
- 若发现本该已卸载的组件仍有监听器，说明
removeEventListener调用失败或未执行； - 也可临时在监听函数内加
console.trace()，确认是否被意外多次绑定。
不复杂但容易忽略。核心就三点：用同一函数、配同一选项、在生命周期终点清干净。
