是否有调试jQuery事件处理程序的工具/技术？

Question

我目前正在尝试找出点击事件处理程序附加到我的div的内容。应该只附加一个处理程序，但似乎至少有一个。我正在使用FireBug，但Chrome也可以选择。我不喜欢IE，所以我不想使用它。

最好的情况是我可以使用FireBug检查我的div，并查看事件处理程序列表。

Answer 1

Visual Event是一个不错的javascript书签，您可以在页面上运行以查看附加到控件的所有事件。

Answer 2

如果您使用jQuery分配事件处理程序，则可以通过$("div").data("events");

找到附加的事件

$("div.test").each(function(){
    var events = $(this).data("events");
    //events.click will give you a list of click handlers, events.mouseenter, etc..
    $.each(events, function(i, eventType){
        $.each(eventType, function(){
          //this.handler() can be used to find the anonymous function assigned to the element.
          $("body").append("<h1>" + this.type + "</h1>");
        });
    });
});

如果您希望获得实时处理程序，您可以为文档执行相同的操作。

var liveEvents = $(document).data("events").live;
$.each(liveEvents, function() {
    $("body").append("<h1>" + this.selector + this.origType +  "</h1>");
});

jsfiddle上的示例。

Answer 3

为firebug安装fireQuery插件，您将在firebug显示中看到所有与jQuery相关的事件，就像您希望的那样;）

您可以在此处找到它：http://firequery.binaryage.com/或此处：https://addons.mozilla.org/en-us/firefox/addon/firequery/

它会让你的萤火虫看起来像这样：

Answer 4

查看$ .data函数。

具体是这样的：

var clicks = $（mySelector）.data（'events'）。click;

应返回单击事件处理程序及其关联DOM对象的列表。

Answer 5

“fire-bug”附加组件（对于mozilla）是最好的选择。