javascript - HTML/JS : How to trace the event handlers and corresponding files

Question

我需要跟踪与 HTML DOM 元素的每个事件关联的每个事件处理程序，例如 Chrome 或 Firefox 等浏览器中的 Button 。我还想知道哪个文件包含事件处理函数。

我使用 Rails 框架和 jQuery 工作。我有很多 JS 文件需要管理。当客户端出现问题时，要找到罪魁祸首非常麻烦。

有人可以在这方面帮助我吗？

Answer 1

您可以使用 Chrome 开发工具查找添加到任何元素的事件监听器，如下所示。

1. 右键点击您想要检查的元素(例如某个按钮)
2. 在上下文菜单中选择“检查元素”
3. 选择“事件监听器”选项卡(如屏幕截图中的 1 所示)
4. 要过滤仅绑定(bind)到所选元素的监听器，请将过滤器设置为“仅限选定节点”(在屏幕截图中显示为 2)
5. 单击列表右列中显示的链接可访问监听器源代码。 (如截图中的3所示)

另请参阅:https://developer.chrome.com/devtools/docs/dom-and-styles#viewing-element-event-listeners