JavaScript
Article

Listing JavaScript Events using jQuery

By Sam Deering

How can you list JavaScript events attached to an element?

I wanted to get a full list of js/jQuery events that are attached to any specified element and I was reading around and saw John Resig suggested to use this method:

$('div').data('events');

In theory this would get all the events associated with the div element. To snazz this up I found this method to be pretty productive in listing events!

(function($) {
    $.eventReport = function(selector, root) {
        var s = [];
        $(selector || '*', root).andSelf().each(function() {
            var e = $.data(this, 'events');
            if(!e) return;
            s.push(this.tagName);
            if(this.id) s.push('#', this.id);
            if(this.className) s.push('.', this.className);
            for(var p in e) s.push('n', p);
            s.push('nn');
        });
        return s.join('');
    }
    $.fn.eventReport = function(selector) {
        return $.eventReport(selector, this);
    }
})(jQuery);

Usage & Output

//List all events
console.log($.eventReport());

events-list

// just events on inputs
console.log($.eventReport('input'));

events-list-input

Other Usage

// just events assigned to this element
console.log($.eventReport('#myelement'));

// events assigned to inputs in this element
console.log($.eventReport('input', '#myelement'));
console.log($('#myelement').eventReport('input')); // same result

// just events assigned to this element's children
console.log($('#myelement').eventReport());
console.log($.eventReport('*', '#myelement'); // same result

Other methods

http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.