如何知道事件发生时触发了什么功能（或代码片段）？

Question

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

现在我想以同样的方式学习JavaScript（我只知道关于JS的一点点）。让我们说：

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

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

当我“点击”设置按钮时，如何知道调用哪个函数来显示“选项框”？

Answer 1

这不是一个肯定的答案，但可能有一些方法可以看出是否存在与元素绑定的函数以及对它们可能做什么的模糊概念。

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

如果您使用的是Firefox，则会有一个名为FireQuery的Firebug扩展名，它实际上会在Firebug中注释DOM检查器，并提供指向事件的链接。

最后，您可以在jQuery-inlog库中加载，以实际查看jQuery内部正在执行的操作。这可能是最好的选择，因为您不必在任何设置上设置断点。只需正常使用该页面，jQuery内部日志记录将显示在控制台中。您只需要在要检查的任何页面上注入脚本。在Firefox上，可以使用Greasemonkey完成 - 有关更多详细信息，请参阅Running custom Javascript on every page in Mozilla Firefox。

Answer 2

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

您单击的元素或其祖先之一（因为click事件气泡），肯定会识别属性（例如id和class），以便事件侦听器可以轻松添加到它。请注意事件类型名称（例如click）以及脚本代码中那些标识属性的值。

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