如何知道事件发生时触发了什么函数(或代码片段）

How to know what function (or code snippet) is triggered when an event happens?

本文关键字：函数 代码 片段 什么 事件 何知道      更新时间：2023-09-26

我通过使用Firebug工具查看浏览器上的代码来学习HTML和CSS。如果我不能理解他们做什么，我会查找他们的参考资料。我学到了很多。

现在我想以同样的方式学习JavaScript（我只是对JS略知一二）。比方说：

  1. 我打开一个网页（例如Facebook）
  2. 我点击页面右上角的设置按钮。它显示了选项列表（帐户设置、隐私设置、注销…）
  3. 我知道选项框是一个<ul>标记，当我单击设置按钮时，它将切换显示/隐藏

据我所知，如果我想测试JS片段（使用Firebug），我必须知道它应该在什么时候运行。但我不是Facebook的开发者，我没有写那个代码，所以我猜不到这一点。

当我"点击"设置按钮时，我如何知道调用了什么功能来显示"选项框"？

这不是一个肯定的答案，但可能有几种方法可以查看是否有函数绑定到元素，以及它们可能做什么的模糊想法。

首先，Chrome的Firebug等价物在右窗格中（按F12，在检查一个元素后，向下滚动到事件监听器部分，它将显示绑定到该元素的函数。

如果你在Firefox上，Firebug有一个名为FireQuery的扩展，它实际上会用指向事件的链接来注释Firebug中的DOM检查器，这同样很有用。

最后，您可能能够在jQueryinlog库中加载，以实际查看jQuery在内部做什么。这可能是最好的选择，因为您不必在任何事情上设置断点。只需正常使用页面，jQuery内部日志就会显示在控制台中。您只需要在要检查的任何页面上注入脚本。在Firefox上，这可以通过Greasemonkey来完成——有关更多详细信息，请参阅在Mozilla Firefox的每个页面上运行自定义Javascript。

除非开发人员使用符合标准的事件处理程序属性，否则这不是一项微不足道的任务。

您单击的元素或它的祖先之一（因为click事件气泡）具有最确定的标识属性（例如，id和class），因此可以很容易地将事件侦听器添加到其中。请注意脚本代码中的事件类型名称（例如，click）和这些标识属性的值。

如果开发人员使用（通常符合标准）事件处理程序属性或专有事件处理程序特性（如onclick），则应该在DOM检查器（如Firebug）中看到这些属性的（可点击的）函数值。但现在这种可能性不大了。

相关文章：