javascript - 如何找出哪个元素触发了哪个事件

Question

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

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

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

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

我使用的是 Firefox，因此我可以在控制台中输入的任何内容也是一个选项。多个 javascript 文件中的 eventy 有多种方式完成，有些通过 jquery，有些使用内联属性(例如 onclick="...")，有些仅使用 javascript。

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

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

Answer 1

可以使用 Break On Mutate option 来追踪 DOM 修改在 Firebug 中。可以通过单击 HTML panel 中的相关按钮 ( ) 来激活它。 。请注意 Script panel必须启用此功能才能工作。

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

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