如何知道事件发生时触发了什么功能（或代码片段）？ [英] How to know what function (or code snippet) is triggered when an event happens?
问题描述
我通过使用Firebug工具查看浏览器上的代码来学习HTML和CSS。如果我不明白他们做了什么，我会查阅他们的参考资料。我学到了很多东西。
I learn HTML and CSS by looking at the code on browsers with Firebug tool. If I can't understand what they do, I look up their reference. And I learned a lot.
现在我想以同样的方式学习JavaScript（我只知道关于JS的一点点）。让我们说：
Now I want to learn JavaScript in the same way (I just know a litle bit about JS). Let's say:
- 我打开一个网页（例如Facebook）
- 我点击设置按钮在页面的右上角。它显示了一个选项列表（帐户设置，隐私设置，注销，...）
- 我知道选项框是
< ul>标签，当我点击设置按钮时它会切换显示/隐藏。
- I open a web page (e.g Facebook)
- I click on setting button on the top right of the page. It shows a list of options (Account Setting, Privacy Settings, Log Out, ...)
- I know the options box is an
<ul>tag, and it will toggle show/hide when I click on the setting button.
据我所知如果我想测试JS片段（使用Firebug），我必须知道它应该在什么时候运行。但我不是Facebook的开发人员，我没有编写那些代码，所以我无法猜到这一点。
As far as I know, if I want to test a JS snippet (using Firebug), I have to know at what point it should run through. But I am not a Facebook developer, I didn't write that code, so I can't guess that point.
我怎么知道调用哪个函数来显示我点击设置按钮时的选项框？
How can I know what function is called to show the "options box" when I "click" on setting button?
推荐答案
这不是一个肯定的答案，但可能有一些方法可以看出是否存在与元素绑定的函数以及对它们可能做什么的模糊概念。
It's not a sure-fire answer but there might be a few ways to see if there are functions bound to elements and a vague idea of what they might do.
首先，Chrome的Firebug等效于右侧窗格（按
Firstly, Chrome's Firebug equivalent in the right pane (press F12, after Inspecting an element, scroll all the way down to the Event Listeners section and it will show the functions bound to that element.
如果您使用的是Firefox，则会对Firebug进行扩展，名为 FireQuery 它实际上会在Firebug中注释DOM检查器，并带有指向事件的链接，这些链接也很有用。
If you are on Firefox there is an extension to Firebug called FireQuery which will actually annotate the DOM inspector in Firebug with links to the events which again is useful.
最后你可以加载 jQuery-inlog 库实际上可以看到jQuery在内部正在做什么。这可能是最好的选择，因为您不必在任何设置上设置断点。只需正常使用该页面，jQuery内部日志记录将显示在控制台中。您只需要在要检查的任何页面上注入脚本。在Firefox上可以使用Greasemonkey完成 - 请参阅运行自定义Javascript有关详细信息，请参阅Mozilla Firefox 中的每个页面。
Lastly you might be able to load in the jQuery-inlog library to actually see exactly what jQuery is doing internally. This is probably the best bet since you don't have to set a breakpoint on anything. Just use the page as normal and the jQuery internal logging will show in the Console. You just need to inject the script on whatever page you want to inspect. On Firefox this could be done with Greasemonkey - see Running custom Javascript on every page in Mozilla Firefox for more details.
这篇关于如何知道事件发生时触发了什么功能（或代码片段）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
