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

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

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

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

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

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

解决方法

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

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

如果你在Firefox上有一个名为FireQuery的Firebug扩展,它实际上会在Firebug中注释DOM检查器,并带有指向事件的链接.

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