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

为完整起见，还请修补removeEventListener，以便在删除阵列时可以将其从阵列中删除。

如果您需要监视通过on连接的侦听器，则必须执行与上述类似的操作来修补HTMLElement.prototype.onclick getter / setter，并对每个要成为侦听器的人进行修补能够检测到。

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

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

1 个答案: