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

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

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

我打开一个网页（如Facebook）

我点击页面右上角的设置按钮。它显示选项列表（帐户设置、隐私设置、注销等）

我知道选项框是一个

标签，当我点击设置按钮时，它将切换显示/隐藏

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

---

当我“单击”设置按钮时，如何知道调用了什么函数来显示“选项框”？

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

您单击的元素或其祖先之一（因为

click

事件气泡）具有最确定的标识属性（例如

id

和

class

），因此可以轻松地向其添加事件侦听器。查看事件类型名称（例如，

单击

）以及脚本代码中标识属性的值

---

如果开发人员使用（通常符合标准）事件处理程序属性或专有事件处理程序属性（如

onclick

），您应该可以在DOM检查器（如Firebug）中看到这些属性的（可单击）函数值。但现在这种情况不太可能发生。

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

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

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

---

最后，您可以在库中加载，以实际查看jQuery在内部执行的操作。这可能是最好的选择，因为您不必在任何内容上设置断点。只需像正常情况一样使用页面，jQuery内部日志将显示在控制台中。您只需将脚本插入要插入的任何页面即可t、 在Firefox上，这可以用Greasemonkey来完成-更多细节请参见。

谢谢你的建议。我看到一些网站，其中很多都是用本机Javascript编写的，不欢迎使用jQueryYou。但是你说的“本机Javascript”（native Javascript）是什么意思呢？与常见的误解相反，jQuery是用“本机Javascript”（适合“JavaScript”；我更喜欢“ECMAScript实现”），写得也很差。这不是编程语言或框架的问题。对不起，我是说“纯JavaScript”，我是JS新手，我从jQuery开始，而不是“纯JS”“.jQuery的函数帮助我的代码更加干净，调试和维护也更加容易。我正在尝试管理和优化我的代码。我现在所有的JS代码实际上都非常糟糕。也没有“javascript”。Re:这和jQuery:足以说明你有很多事情要做（un）学习。这对我来说是非常有用的建议，特别是第一部分。它通常不适用于最小化脚本和事件管理库，但它比扫描源代码要好。如果你曾经最小化过需要调试的脚本，Chrome中的“脚本”选项卡上有一个“漂亮打印”选项允许轻松设置断点和读取的代码：-）谢谢，我忘记了这个选项。尽管如此，这种方法只会将您带到

addEventListener（）

调用，而对于事件管理库，侦听器是一个方法参数。例如，在StackOverflow的“添加注释”按钮上，您可以找到

单击事件的侦听器。显示源代码可以让您访问带有参数的
f.event.add（）
，
c
，
d
，
e
，以及
g
，其中一个参数用于定义
i
，然后在调用中使用。因此，您并不是真正以这种方式访问侦听器，但如果您能看透源代码，它有助于找到侦听器。如果您使用Chrome的开发工具，您可以在单击时设置一个事件断点，该断点将引导您访问函数。看看保罗·爱尔兰的这段视频，它向你展示了如何做到这一点以及其他很多很酷的事情。