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

说你有这个div:

bar

你这样做:

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

你的javascript代码里面的某个地方。

一旦加载了页面,有没有办法通过firebug或者检查chrome中的元素或其他任何东西,找出#foo的click事件绑定到someFunction ? 即,找到这个而不必查看所有代码?

Chrome Developer工具可以做到这一点。

  1. 右键单击一个元素
  2. 单击检查元素
  3. 在右侧列中,向下滚动到事件侦听器

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

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

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

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

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

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

如果您有单击事件并且只想要该对象,则可以在控制台中执行以下操作:

 $("#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中的任何有线事件,例如:

 
bar

有关data()更多信息,请参阅文档

我建议使用Visual Event 2

以下是如何使用它的说明 。 我几乎每天都使用它,它是一个非常好的工具。

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