判断 DOM 中的元素是否附加了函数

Determining whether or nor there is a function attached to an element inside the DOM

我有一个问题,关于如何找出 DOM 上现有元素中的哪些元素具有通过 'EventListener' 的附加函数。我知道这一点都不容易,我知道我可以使用 Visual Event 来检查它。 但是,我想知道浏览器如何或者更有趣的是,Visual Event 如何检测到它?

假设我们要加载一个网页并从 DOM 中提取所有可点击的元素。我们怎么可能确定某些现有元素不会更改 DOM?

的状态

例如,如果我们对元素一无所知,我们甚至需要尝试点击 P 标签,因为这些标签可能附加了一些功能。但是,如果我们可以确定这个特定元素在单击后是否会执行任何操作,那么如果它不会执行任何操作,我们就可以忽略它。

有什么直接的方法可以让我们做 Visual Event 正在做的事情吗?

没有支持此功能的内置函数。

我知道的最简洁的方法是用您自己的方法覆盖 Element.prototype 上的 addEventListener 方法,该方法记录 DOM 节点上的 additions/removals 事件侦听器。然后您可以公开一个函数来枚举它们。

此修改当然需要 运行 在您的应用程序中的相关事件侦听器 activity 之前。

How to find event listeners on a DOM node when debugging or from the JavaScript code?

请注意,Chrome 通过 getEventListeners 和开发工具中的专用 UI 内置了对此功能的支持。