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

Question

假设你有这个 div：

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

你这样做：

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

Javascript 代码中的某处。

加载页面后，有没有办法通过 Chrome 中的 firebug 或 inspect 元素或其他任何方式找出 click 事件#foo绑定到的someFunction？即，无需查看所有代码就可以找到它？

Answer 1

Chrome 开发者工具就是这样做的。

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

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

Firebug 在 DOM 选项卡下有此信息，但它对用户不太友好。

Answer 2

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

使用调试器控制台，您可以使用 jQuerydata("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()文档中

Answer 3

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

Answer 4

I would suggest using Visual Event 2.

Here is the description on how to use it. I use it almost everyday and its a very good tool.