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

Question

有没有什么方法可以使用该页面上的 JavaScript 获取 HTML 页面上某个元素的所有事件侦听器的列表。

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

另外，我知道我们可以通过 jQuery 获取它们，但为此，我们还必须使用 jQuery 应用事件，但我想要一些通用的东西，因此我还可以访问应用于其他元素（如 web）的事件侦听器组件或反应组件。

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 数组并查找与您要查找的元素匹配的 targets。

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

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

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