javascript tutorial - [Solved-5 Solutions] Javascript/jQuery event binding with firebug - javascript - java script - javascript array

How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

See How to find event listeners on a DOM node . In a nutshell, assuming at some point an event handler is attached to our element (eg): $('#foo').click(function() { console.log('clicked!') }); We inspect it like so:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
  console.log(value) // prints "function() { console.log('clicked!') }"
})

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

See jQuery.fn.data (where jQuery stores our handler internally).

var clickEvents = $._data($('#foo')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

There's a nice bookmarklet called Visual Event that can show we all the events attached to an element. It has color-coded highlights for different types of events (mouse, keyboard, etc.). When we hover over them, it shows the body of the event handler, how it was attached, and the file/line number (on WebKit and Opera). We can also trigger the event manually. It can't find every event because there's no standard way to look up what event handlers are attached to an element, but it works with popular libraries like jQuery, Prototype, MooTools, YUI, etc.

The Eventbug extension has been released yesterday, see here

Here's a plugin which can list all event handlers for any given element/event:

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + we + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Use it like this:

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});
Src: (my blog) -> <http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/>

Use $._data(htmlElement, "events") in jquery 1.7+;

ex:
$._data(document, "events") or $._data($('.class_name').get(0), "events")