检查附加的事件处理程序是否有任何DOM元素

Question

有什么方法可以查看哪些函数/代码附加到DOM元素的任何事件？使用Firebug或任何其他工具。

Answer 1

使用传统的element.onclick= handler或HTML <element onclick="handler">附加的事件处理程序可以从脚本或调试器中的element.onclick属性中简单检索。

使用DOM级别2事件附加的事件处理程序addEventListener方法和IE的attachEvent目前无法从脚本中检索。 DOM级别3曾经提出element.eventListenerList以获取所有侦听器，但尚不清楚这是否会使其达到最终规范。今天在任何浏览器中都没有实现。

作为浏览器扩展的调试工具可能可以访问这些类型的侦听器，但我并不知道任何实际的操作。

一些JS框架留下了足够多的事件绑定记录来确定他们所做的事情。 Visual Event采用这种方法来发现通过一些流行框架注册的监听器。

Answer 2

您可以通过查看DOM直接查看附加事件（element.onclick = handler）。 您可以使用带FireQuery的FireBug在Firefox中查看jQuery附加事件。似乎没有任何方法可以使用FireBug查看addEventListener添加的事件。不过，您可以使用Chrome调试器在Chrome中查看它们。

Answer 3

的Elements Panel in Google Chrome Developer tools不得不这一点，因为铬中旬2011和铬显影剂通道释放自2010年

释放另外，对于所选择的节点中示出的事件侦听器是在其通过烧制顺序捕获和冒泡阶段。

命中命令 + 选项 + 我在Mac OSX和按Ctrl + 移 + 我在Windows平台上的Chrome火这件事

Answer 4

你可以使用Allan Jardine的Visual Event来检查来自几个主Jav的所有当前附加的事件处理程序您页面上的aScript库。它适用于jQuery，YUI和其他几个。

Visual Event是一个JavaScript书签，因此与所有主流浏览器兼容。

Answer 5

您可以扩展您的javascript环境以跟踪事件侦听器。使用某些代码对原生addEventListener（）方法进行包装（或“重载”），该代码可以保留任何事件侦听器的记录，从此之后添加。您还必须扩展HTMLElement.prototype.removeEventListener以保留准确反映DOM中正在发生的事件的记录。

仅用于演示（未经测试的代码）的缘故 - 这是你将如何“包装”的addEventListener会对对象本身的注册事件侦听器记录的一个例子：

var nativeMethod = HTMLElement.prototype.addEventListener; 
HTMLElement.prototype.addEventListener = function (type, listener) { 
    var el = e.currentTarget; 
    if(!(el.eventListeners instanceof Array)) { el.eventListeners = []} 
    el.eventListeners.push({'type':type, 'listener':listener}); 
    nativeMethod.call(el, type, listener); 
} 

Answer 6

Chrome开发工具最近宣布了一些新的工具Monitoring JavaScript Events。

TL; DR

收听使用monitorEvents()某种类型的事件。使用unmonitorEvents()停止收听。

使用getEventListeners()获取DOM元素的监听器。

使用“事件侦听器检查器”面板获取有关事件侦听器的信息。

查找自定义事件

对于我的需要，发现自定义JS事件的第三方代码，该getEventListeners()以下两个版本是惊人的有益的;

• getEventListeners(window)
• getEventListeners(document)

如果你知道什么DOM节点事件监听器被安装到你的是传递的，而不是window或document。

已知事件

如果你知道你要监视例如什么事件click您可以使用以下文件：monitorEvents(document.body, 'click');。

您现在应该开始查看控制台中记录的document.body上的所有点击事件。