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

Question

说你有这个div:

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

你这样做:

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

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

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

Answer 1

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

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

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

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

Answer 2

您可以在浏览器内置的开发人员工具中使用控制台.它们内置于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中的任何有线事件,例如:

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

有关详细信息data(),请参阅文档