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

Question

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

Answer 1

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

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

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

一些JS框架留下了足够的事件绑定记录，以计算出它们所做的工作。Visual Event采用这种方法来发现通过一些流行框架注册的侦听器。

Answer 2

自2011年中发布Chrome以来，自2010年以来发布了Chrome开发者渠道，Google Chrome开发者工具中的Elements Panel便具有此功能。

同样，为选定节点显示的事件侦听器按其在捕获和冒泡阶段中触发的顺序排列。

命中command+ option+ i在Mac OSX和Ctrl+ Shift+ i在Windows上的Chrome火这件事

Answer 3

Chrome开发工具最近发布了一些用于监视JavaScript事件的新工具。

TL; DR

使用收听特定类型的事件monitorEvents()。

使用unmonitorEvents()停止监听。

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

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

查找自定义事件

对于我的需要，在第3方代码中发现自定义JS事件，以下的两个版本getEventListeners()非常有用。

getEventListeners(window)

getEventListeners(document)

如果您知道将事件侦听器附加到哪个DOM节点，则将其传递给而不是windowor document。

已知事件

如果您知道要监视的事件（例如click在文档正文上），则可以使用以下命令：monitorEvents(document.body, 'click');。

现在，您应该开始document.body在控制台中看到正在记录的所有单击事件。