Question

说你有这个div：

<div id="foo">bar</div>

你这样做：

$("#foo").click(someFunction);

在您的javascript代码中的某处。

一旦加载了页面，有没有办法通过firebug或者chrome中的元素或其他任何内容找出#foo的click事件绑定到someFunction？即，在不必查看所有代码的情况下找到它？

Answer 1

Chrome开发者工具可以做到这一点。

右键单击元素
点击检查元素
，向下滚动到事件监听器

这将为您提供对象上的事件侦听器列表，可以对其进行扩展以查找其源和附加函数。

Firebug在DOM选项卡下有这些信息，但用户不太友好。

Answer 2

您可以在浏览器内置的开发人员工具中使用控制台。它们内置于IE和Chrome，而FF则需要安装Firebug AddOn。我不了解其他浏览器。

使用调试器控制台，您可以使用jQuery data("events")来查询元素的附加事件。此外，这些控制台还可以让您动态深入了解您感兴趣的事件的任何其他细节。

$("#foo").data("events");

在控制台中执行上述操作将显示一个对象，该对象具有找到的每个事件的属性。在您的示例中，它返回一个具有click属性类型的对象，该类型存储所有单击事件。

如果您有点击事件而您只想要该对象，则可以在控制台中执行以下操作：

$("#foo").data("events").click;

每个事件对象都有一个handler属性，它将显示它们绑定的函数：

Object
data: null
guid: 2
handler: function mytestFunction(){
arguments: null
caller: null
guid: 2
length: 0
name: "mytestFunction"
prototype: mytestFunction
__proto__: function Empty() {}
namespace: ""
origType: "click"
quick: null
selector: null
type: "click"
__proto__: Object

请参阅DEMO，了解如何在控制台中查询和显示对象。

或者，您也可以使用“处理程序”作为整体摘要对象：

$("#foo").data("handlers");

请注意，.data("events/handlers")不会包含嵌入在html中的任何有线事件，例如：

<div id="foo" onclick="...">bar</div>

有关data()的更多信息，请参见documentation

Answer 3

我建议使用Visual Event 2。

以下是关于如何使用它的description。我几乎每天都使用它，它是一个非常好的工具。

Answer 4

我不了解Firefox，但有一种简单的方法可以在Chrome和Safari中查看事件监听器。只需打开开发人员工具，选择您的元素并滚动到CSS属性面板的底部。你会找到一个“事件听众”部分。

有没有办法用Javascript查找元素的事件处理程序？

4 个答案: