如何找出在什么元素上触发了什么事件

Question

是否有工具（或 firebug 中的某些东西）可以告诉我刚刚触发了哪些事件，更重要的是它们绑定到了哪些元素？

我有一些 javascript“包含”，有些是缩小的，有些不是。我遇到了一些我想关闭的奇怪行为，但我找不到导致它的原因。

我有一个显示在“弹出窗口”中的表单，当我尝试单击其中一个输入框时，“弹出窗口”会关闭，因此某处的某些事件绑定导致了这种情况。

问题是，我不知道哪个元素绑定了这个虚假事件。如果我单击弹出窗口内的任何位置（以及覆盖页面其余部分的背景掩码，但这是可以接受的），也会出现此问题

我使用的是 firefox，所以我可以在控制台中输入的任何内容也是一个选项。多个 javascript 文件中的事件以各种方式完成，一些通过 jquery，一些使用内联属性（例如 onclick="..."），一些仅使用 javascript。

我当然不想在每个 javascript 文件中为每个可能的事件添加一些代码行。

我花了一个多小时试图寻找这个 dom 元素，并且已经消除了一些明显的元素，比如包含弹出窗口和 body 标记的 div。

Answer 1

可以使用 Firebug 中的 Break On Mutate option 跟踪 DOM 修改。它可以通过单击HTML panel 中的相关按钮（）来激活。请注意，必须启用 Script panel 才能使其正常工作。

还有其他几个Break On ... features，它们可以帮助您在代码中为特定事件找到正确的位置。

此外，Firebug 2.0 引入了Events side panel，它显示绑定到 HTML 面板中所选元素的所有事件。如果使用 jQuery 之类的库，它甚至允许您调查由库函数包装的用户定义函数，以防您启用选项 Show Wrapped Listeners，如the answer to a related question 中所述。