假设你有这个div:
<div id="foo">bar</div>
你这样做:
$("#foo").click(someFunction);
在你的Javascript代码中的某个地方。
加载页面后,有没有办法通过 Firebug 或 Chrome 中的检查元素或其他任何东西来找出#foo
的点击事件绑定到someFunction
? 即,无需查看所有代码即可找到这一点?
Chrome Developer 工具可以做到这一点。
- 右键单击元素
- 单击"检查元素"
- 在右侧列中,向下滚动到事件侦听器
这将为您提供对象上的事件侦听器列表,可以展开该列表以查找其源和附加函数。
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 中的任何事件,例如:
<div id="foo" onclick="...">bar</div>
有关data()
的更多信息,请参阅文档
我不知道 Firefox,但有一种简单的方法可以在 Chrome 和 Safari 中查看事件侦听器。只需打开开发人员工具,选择您的元素并滚动到 CSS 属性面板的底部。您将找到"事件侦听器"部分。
我建议使用Visual Event 2
.
这是有关如何使用它的说明。我几乎每天都使用它,这是一个非常好的工具。