有什么方法可以查看 DOM 元素的任何事件附加了哪些函数/代码？使用 Firebug 或任何其他工具。
检查任何 DOM 元素的附加事件处理程序
IT技术
javascript
events
2021-02-05 19:47:54
6个回答
自 2011 年中期 Chrome 发布和自 2010 年以来 Chrome 开发者频道发布以来，Google Chrome 开发者工具中的Elements Panel就已拥有此功能。
此外，为选定节点显示的事件侦听器按它们在捕获和冒泡阶段被触发的顺序排列。
命中command+ option+i在Mac OSX和Ctrl+ Shift+i在Windows上的Chrome火这件事
使用传统element.onclick= handler或 HTML附加的事件处理程序<element onclick="handler">可以element.onclick从脚本或调试器中的属性中轻松检索。
使用 DOM Level 2 EventsaddEventListener方法和 IE附加的事件处理程序attachEvent目前根本无法从脚本中检索。DOM Level 3 曾提议element.eventListenerList获取所有侦听器，但尚不清楚这是否会使其成为最终规范。目前在任何浏览器中都没有实现。
作为浏览器扩展的调试工具可以访问这些类型的侦听器，但我不知道实际上有什么。
一些 JS 框架留下了足够的事件绑定记录来计算它们一直在做什么。Visual Event采用这种方法来发现通过一些流行框架注册的侦听器。
Chrome Dev Tools最近发布了一些用于监控 JavaScript 事件的新工具。
TL; 博士
使用 收听某种类型的事件
monitorEvents()。使用
unmonitorEvents()停止监听。使用 获取 DOM 元素的侦听器
getEventListeners()。使用 Event Listeners Inspector 面板获取有关事件侦听器的信息。
查找自定义事件
根据我的需要，在 3rd 方代码中发现自定义 JS 事件，以下两个版本getEventListeners()非常有用；
getEventListeners(window)getEventListeners(document)
如果您知道事件侦听器附加到哪个 DOM 节点，您将传递它而不是windowor document。
已知事件
如果您知道要监视的事件，例如click在文档正文中，您可以使用以下内容：monitorEvents(document.body, 'click');.
您现在应该开始看到document.body控制台中记录的所有点击事件。
您可以通过查看 DOM 来查看直接附加的事件（element.onclick = handler）。您可以在 Firefox 中使用 FireBug 和 FireQuery 查看附加的 jQuery 事件。似乎没有任何方法可以使用 FireBug 查看 addEventListener 添加的事件。但是，您可以使用 Chrome 调试器在 Chrome 中查看它们。
您可以使用Allan Jardine 的Visual Event检查页面上几个主要 JavaScript 库中所有当前附加的事件处理程序。它适用于 jQuery、YUI 和其他几个。
Visual Event 是一个 JavaScript 书签，因此与所有主要浏览器兼容。