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

Question

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

现在我想以相同的方式学习JavaScript(我只知道关于JS的一点点).让我们说:

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

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

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

Answer 1

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

首先,在右侧窗格中Chrome的Firebug等效(按下F12,在检查元素后,一直向下滚动到Event Listeners部分,它将显示绑定到该元素的函数.

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

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

Answer 2

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

您单击的元素或其祖先之一（因为click事件冒泡）肯定具有标识属性（例如，id和class），以便可以轻松地将事件侦听器添加到其中。click然后在脚本代码中查找事件类型名称（例如， ）和那些标识属性的值。

如果开发人员使用（通常符合标准）事件处理程序属性或专有事件处理程序属性（例如onclick），您应该在 DOM 检查器（例如 Firebug 的）中看到这些属性的（可单击）函数值。但如今这种情况已经不太可能发生了。