有没有办法使用 HTML 页面上的 JavaScript 获取该页面上某个元素的所有事件侦听器的列表。
注意：我知道我们可以使用 Chrome 开发工具事件侦听器查看它们，但我想使用页面的 JavaScript 来记录/访问查看列表。
另外，我知道我们可以通过 jQuery 获取它们，但为此，我们还必须使用 jQuery 应用事件，但我想要通用的东西，这样我还可以访问应用于其他元素（例如 Web 组件或 React）的事件侦听器成分。
如果您确实必须这样做，那么执行此操作的一般方法是修补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.onclickgetter/setter，以及您希望能够检测到的每个侦听器。
也就是说，虽然您说您想要一个通用的解决方案，而不是修补内置原型，但最好通过 jQuery 或通过您自己的函数添加侦听器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
