如何在Firefox中像Chrome的getEventListeners一样获取元素事件监听器？

Firefox没有Chrome那样原生的getEventListeners() API，但可以通过两种方式获取元素上的事件绑定：

1. 调用Firefox开发者工具内部接口 #

在开发者工具控制台中，先选中目标元素（可通过右键Inspect或直接用$0指代当前Inspector选中的元素），执行以下代码：

const listeners = window.wrappedJSObject.getEventListeners($0);
console.log(listeners);

这会返回和Inspector面板里完全一致的事件列表，包含所有通过addEventListener和属性绑定的事件。

2. 手动检测事件绑定 #

如果不想依赖DevTools内部接口，可以手动遍历元素的事件属性和内部存储的监听器：

function getElementEventListeners(el) {
  const result = {};

  // 获取通过onXXX属性绑定的事件
  for (const prop of Object.keys(el)) {
    if (prop.startsWith('on')) {
      const eventType = prop.slice(2);
      const handler = el[prop];
      if (handler) {
        result[eventType] = result[eventType] || [];
        result[eventType].push({ type: 'inline', handler: handler.toString() });
      }
    }
  }

  // 获取通过addEventListener绑定的事件（依赖Firefox内部存储）
  if (el._eventListeners) {
    for (const [type, listeners] of Object.entries(el._eventListeners)) {
      result[type] = result[type] || [];
      result[type].push(...listeners.map(l => ({ type: 'addEventListener', handler: l.listener.toString() })));
    }
  }

  return result;
}

// 使用示例
console.log(getElementEventListeners(document.querySelector('.your-element')));

这种方式能覆盖大部分常见事件，但相比DevTools接口，可能会遗漏一些特殊场景的绑定。

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