是否有调试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对象的列表.