如何用 removeEventListener 移除事件监听防止页面内存泄漏-js教程-PHP中文网

必须用同一函数引用、相同事件类型和完全一致的选项对象才能成功移除事件监听器，否则导致内存泄漏；匿名函数不可移除；once监听器触发后自动移除，但可提前取消；组件卸载时须及时清理。

如何用 removeeventlistener 移除事件监听防止页面内存泄漏

用 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); // 自动执行
}, []);