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

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器，请遍历listeners数组并查找与您要查找的元素匹配的target 。

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

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

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

Answer 2

当我遇到类似问题时，我所做的是在设置侦听器时添加一个数据属性，以便稍后识别它。

在添加监听器的 function 末尾：

elm.setAttribute('data-has_mask', true);

在同一个 function 的开头：

if("true" == elm.getAttribute('data-has_mask')) {
    return;
}

也许不完全是 OP 正在寻找的东西，但我在这方面遇到了很多麻烦，这是针对特定用例的明显解决方案，我想它可能会帮助某人。