Are there tools / techniques to debug jQuery event handlers?

Question

I am currently trying to figure out what click event handlers have attached to my div. There should only be one handler attached, but there appears to be at least one. I'm using FireBug but Chrome could be an option as well. I don't like IE so I'd prefer not to use that.

The best case scenario is that I can inspect my div using FireBug, and see a list of event handlers.

Answer 1

Visual Event is a nice javascript bookmark you can run on a page to see all the events that are attached to a control.

Answer 2

If you are using jQuery to assign your event handlers you can locate the attached events via $("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>");         });     }); }); 

If you wish to get live handlers you can do the same thing for the document.

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

Example on jsfiddle.

Answer 3

Install fireQuery plugin for firebug and you will see all jQuery-attached events in the firebug display, just like you wish ;)

You can find it here: http://firequery.binaryage.com/ or here: https://addons.mozilla.org/en-us/firefox/addon/firequery/

It will make your firebug look like this:

Answer 4

Check out the $.data function.

Specifically something like this:

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

Should return a list of click event handlers and their associated DOM objects.