javascript - 如何获取元素的事件监听器

Question

有没有办法在该页面上使用 JavaScript 获取 HTML 页面上元素的所有事件监听器的列表。

注意:我知道我们可以使用 Chrome 开发工具事件监听器查看它们，但我想使用页面的 JavaScript 记录/访问查看列表。

此外，我知道我们可以通过 jQuery 获取它们，但为此，我们还必须使用 jQuery 应用事件，但我想要一些通用的东西，这样我也可以访问应用于其他元素的事件监听器，例如 web组件或 react 组件。

Answer 1

如果您真的必须这样做，一般的方法是修补 EventTarget.prototype.addEventListener:

const listeners = [];
const orig = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(...args) {
  if (this instanceof HTMLElement) {
    listeners.push({
      type: args[0],
      fn: args[1],
      target: this,
    });
  }
  return orig.apply(this, args);
};

document.body.addEventListener('click', () => console.log('body clicked'));
console.log(listeners[0].fn);

click this body

要查找附加到元素的监听器，请遍历 listeners 数组并查找与您要查找的元素匹配的 target。

为了完整起见，还要修补 removeEventListener，以便在删除时可以从数组中删除项目。

如果您需要监听通过 on 附加的监听器，那么您必须执行与上述类似的操作来修补 HTMLElement.prototype.onclick getter/ setter ，以及您希望能够检测到的每个监听器。

也就是说，虽然您说您想要一个通用的解决方案，而不是修补内置原型(prototype)，但最好通过 jQuery 或您自己的函数添加监听器。