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

【问题标题】：Are there tools / techniques to debug jQuery event handlers?是否有调试 jQuery 事件处理程序的工具/技术？
【发布时间】：2011-07-09 01:25:59
【问题描述】：

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

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

【问题讨论】：

我喜欢这个问题，还有更多的问题
有人刚刚发布了一个书签，让您可以查看附加到函数的事件处理程序。我认为这非常棒。 sprymedia.co.uk/article/Visual+Event
我认为这些答案都很棒。我将在今天晚些时候挑选我最喜欢的，并在后续编辑中总结回复。请继续发帖！

标签： javascript jquery google-chrome firebug jquery-events

【解决方案1】：

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

【讨论】：

它似乎仍然没有揭示真正处理事件的函数，只是表明 jquery 正在以某种方式监听

【解决方案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 上的示例。

【讨论】：

这似乎不适用于 jQuery 1.10。在$(element).on("custom-event", function() { console.log("hi"); }) 之后，如果我检查$(element).data('events') 我会得到undefined，但$(element).trigger("custom-event") 会触发该回调。

【解决方案3】：

为 firebug 安装 fireQuery 插件，您将在 firebug 显示中看到所有 jQuery 附加的事件，就像您希望的那样；)

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

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

【讨论】：

我希望 Chrome 有这个

【解决方案4】：

查看 $.data 函数。

具体是这样的：

var clicks = $(mySelector).data('events').click;

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

【讨论】：

【解决方案5】：

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

【讨论】：

The best case scenario is that I can inspect my div using FireBug, and see a list of event handlers.
我已经安装了firebug并一直在使用它。下一步是什么？
我四处寻找，我不相信有一种方法可以通过查看 firebug 中的 DOM 元素来查看附加事件，就像 MedicineMan 想要做的那样。断点只有在事件被触发后才会有所帮助。他想在任何给定时间查看附加的内容。