Displaying DOM element events and their handlers

Question

Is there a tool - such as a browser extension, jQuery console script, bookmarklet or Firebug plugin - that displays all events that can be fired by a particular DOM element, and include any event handlers currently listening to those events?

Answer 1

You are looking for:

FireQuery

http://firequery.binaryage.com/

To do it your own, you can always access the events data structure from a jQuery object.

Example:

$(document.body).bind('click', function(){
   alert('I am an event handler!');
});

$.each($(document.body).data('events'), function(i,v){
  console.log(i);
  $.each(v, function(i2,v2){
    console.log(' > ', v2.handler.toString());
  });
});

That would list all events into your FireBug/Webkit console and print it's event handler functions as plain text. You can remove the .toString() part or just log v2 the get more detailed information.

update

Like Anurag commented, that will show you only handlers which were bound through jQuery. It will not lookup up addEventhandler() / addHandler or inline-event handlers.

You can lookup inline-event handlers by checking for the on-xxx attribute. DOM level3 does implement hasEventListenerNS, but I don't think any browser uses those yet.

Answer 2

Chrome's built-in developer bar shows event handlers bound to a particular DOM element, but it doesn't list events that don't have handlers already bound to them.