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

Question

有没有办法查看哪些函数/代码附加到DOM元素的任何事件？使用Firebug或任何其他工具.

Answer 1

谷歌Chrome开发者工具中的元素面板自2011年中期发布Chrome以及自2010年以来的Chrome开发人员频道发布以来就已经有了这个.

此外,为所选节点显示的事件侦听器按照捕获和冒泡阶段触发它们的顺序.

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

Answer 2

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

使用DOM Level 2 Events addEventListener方法和IE 附加的事件处理程序attachEvent当前无法从脚本中检索.DOM Level 3曾经被提议element.eventListenerList用于获取所有听众,但目前还不清楚这是否会使其达到最终规范.今天在任何浏览器中都没有实现.

作为浏览器扩展的调试工具可以访问这些类型的侦听器,但我不知道实际上有什么.

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

Answer 3

Chrome Dev Tools最近发布了一些用于监控JavaScript事件的新工具.

TL; DR

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

使用unmonitorEvents()停止监听.

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

使用"事件侦听器"检查器面板获取有关事件侦听器的信息.

查找自定义事件

根据我的需要,在第三方代码中发现自定义JS事件,以下两个版本getEventListeners()非常有用;

• getEventListeners(window)
• getEventListeners(document)

如果您知道事件监听器附加到哪个DOM节点,那么您将传递该节点而不是window或document.

已知事件

如果您知道要监控的事件,例如click在文档正文中,您可以使用以下内容:monitorEvents(document.body, 'click');.

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

Answer 4

您可以通过查看DOM来查看直接附加的事件(element.onclick = handler).您可以使用FireBug和FireQuery在Firefox中查看jQuery附加事件.似乎没有办法使用FireBug查看添加addEventListener的事件.但是,您可以使用Chrome调试器在Chrome中查看它们.

Answer 5

您可以使用Allan Jardine的Visual Event来检查页面上几个主要JavaScript库中所有当前连接的事件处理程序.它适用于jQuery,YUI和其他几个.

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