使用Chrome开发工具/ Firebug/IE开发人员工具栏查找元素的附加/绑定事件

Question

在检查页面的DOM时,我想快速了解元素的附加事件

例如,如果按钮具有此HTML DOM

<button id="button1">Click Me</button>

在某个地方(不是我提前知道的地方)它附有一个事件,例如

$("#button1").click(function(){...});

我知道它可以以编程方式完成(我可以使用jQuery查找绑定在元素上的事件吗？)

但有没有办法只使用Chrome/Firefox/IE的开发者工具之一来查看事件列表？

---

更新:我发现在较新的Chrome版本中我有一个名为EventListeners的标签,但它似乎不允许轻松向下钻取到事件源,因为jQuery包装了原始

Answer 1

在第一个$("#button1")元素上获取第一个附加的处理程序

$._data($("#button1").get(0),"events").click[0].handler

的jsfiddle

没人愿意听的长篇故事: 我来这里寻找一个插件.我很高兴看到@schmidlop的答案,但是在jQuery中实际上并没有给我我正在寻找的监听器,它只是显示最终调用特定回调的jQuery事件的通用处理程序.我还在寻找一个Chrome插件,它允许我右键单击一个元素,然后让我钻进附加到该对象的处理程序.

因为那会很酷.

更新: 我发现了一个名为jQuery Debugger的chrome扩展.您只需"检查元素"并从"元素"子菜单中选择"jQuery事件"... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi

Answer 2

Chrome现在有一个Event Listeners选项卡.

Answer 3

使用Chrome检查器选择"元素"选项卡中的元素,然后从"控制台"选项卡中,您可以看到附加到元素的事件getEventListeners($0);.

Answer 4

FireQuery - http://firequery.binaryage.com/让您可以查看绑定到元素的事件并深入了解它们