如何查看React项目中未被正确移除的残留事件监听器

未被正确移除的事件监听器会持续堆叠在其绑定的目标对象上——无论绑定目标是普通DOM节点、window、document还是其他自定义事件派发对象，只要目标对象未被垃圾回收，重复绑定的监听器就会一直留存，不会被自动清理，会导致事件重复触发、内存占用升高的问题。
你提到的三种常规排查方式只能展示当前绑定的监听器列表，无法直接输出按事件类型聚合的数量统计，要拿到类似{ click: Array(5) }的直观结构化统计结果，可以用以下方案：

1. 控制台原生API快速统计 #

Chrome DevTools控制台内置的getEventListeners()API可以直接返回指定目标上绑定的所有原生事件监听器明细，配合简单的转换逻辑就能直接输出你需要的统计格式：

// 先在Elements面板选中要排查的DOM节点，控制台会自动将选中节点存为临时变量$0
const allBoundListeners = getEventListeners($0);
// 按事件类型聚合，输出统计结果
const listenerStats = Object.fromEntries(
  Object.entries(allBoundListeners).map(([eventType, listenerList]) => [
    eventType,
    `Array(${listenerList.length})`
  ])
);
console.log(listenerStats);

如果要排查window、document这类全局对象上的监听器，直接把代码里的$0替换为对应全局对象即可。

注意：getEventListeners()是DevTools控制台专属调试API，仅能在开发者工具环境调用，不要写入业务生产代码。

2. React合成事件场景的统计方案 #

如果你用的是React的合成事件（即JSX中编写的onClick、onChange等事件绑定），这类监听器不会直接绑定到业务DOM节点上，而是统一挂载在React根节点做事件委托，原生getEventListeners()无法直接查到对应明细。这种场景可以在开发环境加临时埋点做全链路追踪：
在项目入口文件的最顶部重写事件绑定/移除的原生方法，维护一份监听器的映射台账，随时可以输出聚合统计结果，参考代码如下（仅开发环境使用，不要上线）：

const listenerTracker = new WeakMap();
const originalAddEventListener = EventTarget.prototype.addEventListener;
const originalRemoveEventListener = EventTarget.prototype.removeEventListener;

EventTarget.prototype.addEventListener = function (type, handler, ...args) {
  if (!listenerTracker.has(this)) listenerTracker.set(this, {});
  const targetListenerMap = listenerTracker.get(this);
  if (!targetListenerMap[type]) targetListenerMap[type] = [];
  targetListenerMap[type].push(handler);
  return originalAddEventListener.call(this, type, handler, ...args);
};

EventTarget.prototype.removeEventListener = function (type, handler, ...args) {
  if (listenerTracker.has(this)) {
    const targetListenerMap = listenerTracker.get(this);
    if (targetListenerMap[type]) {
      const handlerIndex = targetListenerMap[type].indexOf(handler);
      if (handlerIndex > -1) targetListenerMap[type].splice(handlerIndex, 1);
    }
  }
  return originalRemoveEventListener.call(this, type, handler, ...args);
};

// 全局挂载统计方法，控制台直接调用即可
window.getListenerStats = (target) => {
  const targetListeners = listenerTracker.get(target) || {};
  return Object.fromEntries(
    Object.entries(targetListeners).map(([type, list]) => [type, `Array(${list.length})`])
  );
};

埋点添加完成后，你可以模拟完整的组件挂载、卸载流程，在组件卸载后调用getListenerStats(目标节点)，如果对应事件类型的数组长度不为0，就说明存在未被清理的悬空监听器。

3. 可视化排查堆叠监听器 #

如果需要可视化的留存监听器视图，可以使用Chrome DevTools的Memory面板做堆快照对比：

• 组件挂载前拍摄第一张堆快照作为基准
• 完成组件挂载、触发所有事件绑定逻辑后拍摄第二张快照
• 执行完整的组件卸载逻辑后拍摄第三张快照
• 对比第二、第三张快照，搜索EventListener关键词，就能看到所有未被垃圾回收的监听器实例，支持按绑定目标、事件类型分组统计数量，还可以直接追溯悬空监听器的引用链路，定位未清理的根因。

内容的提问来源于stack exchange，提问作者Intaek