检查附加的事件处理程序的任何DOM元素
有什么方法可以查看哪些函数/代码附加到DOM元素的任何事件？ 使用Firebug或任何其他工具。
使用传统的element.onclick= handler或HTML <element onclick="handler">附加的事件处理<element onclick="handler">可以从脚本或in-debugger的element.onclick属性中检索得到。
事件处理程序附加使用DOM级别2事件addEventListener方法和IE的attachEvent目前不能从脚本检索。 DOM Level 3曾经提出过element.eventListenerList来获取所有的监听器，但不清楚这是否会使其达到最终规范。 今天在任何浏览器中都没有实现。
一个作为浏览器扩展的debugging工具可以访问这些types的监听器，但是我并不知道有什么实际的操作。
一些JS框架留下足够的事件绑定logging来解决他们所做的事情。 Visual Event采用这种方法来发现通过一些stream行的框架注册的监听器。
Chrome浏览器开发者工具中的元素面板自从Chrome于2011年中发布以来，Chrome开发人员工具自2010年以来一直在发布。
此外，所选节点显示的事件侦听器按照捕获和冒泡阶段的顺序执行 。
在Mac OSX上点击command + option + i ，在Windows上点击Ctrl + Shift + i即可在Chrome中启动
您可以通过查看DOM直接查看附加事件（element.onclick = handler）。 您可以使用FireBug和FireQuery在Firefox中查看jQuery附加事件。 似乎没有任何方法可以使用FireBug查看addEventListener添加的事件。 不过，您可以使用Chromedebugging器在Chrome中查看它们。
您可以使用Allan Jardine的Visual Event来检查页面上几个主要JavaScript库的所有当前附加的事件处理程序。 它适用于jQuery，YUI和其他几个。
视觉事件是一个JavaScript书签，所以与所有主stream浏览器兼容。
Chrome开发工具最近宣布了一些监控JavaScript事件的新工具。
TL; DR
使用
monitorEvents()来monitorEvents()某种types的事件。使用
unmonitorEvents()来停止监听。使用
getEventListeners()获取DOM元素的侦听器。使用“事件侦听器”检查器面板获取有关事件侦听器的信息。
查找自定义事件
为了我的需要，在第三方代码中发现自定义JS事件，以下两个版本的getEventListeners()非常有帮助;
-
getEventListeners(window) -
getEventListeners(document)
如果您知道事件侦听器附加到哪个DOM节点，则会通过该节点而不是window或document 。
已知事件
如果你知道你想监视的事件，例如click文档正文，你可以使用下面的代码： monitorEvents(document.body, 'click'); 。
您现在应该开始查看在控制台中logging的document.body上的所有单击事件。
你可以扩展你的javascript环境来跟踪事件监听器。 用本地addEventListener（）方法包装（或“重载”）一些代码，这些代码可以保留从此之后添加的任何事件侦听器的logging。 您还必须扩展HTMLElement.prototype.removeEventListener以保留准确反映DOM中正在发生的事件的logging。
只是为了说明（未经testing的代码） – 这是一个例子，你将如何'包装'addEventListenerlogging注册事件侦听器对象本身：
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); }
