判断 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 内置了对此功能的支持。
我有一个问题,关于如何找出 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 内置了对此功能的支持。