How to Find Events Bound on an Element with Jquery

Can I find events bound on an element with jQuery?

In modern versions of jQuery, you would use the $._data method to find any events attached by jQuery to the element in question. Note, this is an internal-use only method:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

The result from $._data will be an object that contains both of the events we set (pictured below with the mouseout property expanded):

Then in Chrome, you may right click the handler function and click "view function definition" to show you the exact spot where it is defined in your code.

Is it possible to obtain a list of events bound to an element in jQuery?

Every event is added to an array.

This array can be accessed using the jQuery data method:

$("#element").data('events')

To log all events of one object to fireBug just type:

console.log ( $("#element").data('events') )

And you will get a list of all bound events.

---

Update:

For jQuery 1.8 and higher you have to look into the internal jQuery data object:

$("#element").each(function(){console.log($._data(this).events);});
// or
console.log($._data($("#element")[0]).events);

Find attached / bound events of an element using Chrome Development Tools / Firebug / IE Developer Toolbar

FireQuery - http://firequery.binaryage.com/ lets you see events bound to elements and drill into them

jQuery find events handlers registered with an object

As of jQuery 1.8, the event data is no longer available from the "public API" for data. Read this jQuery blog post. You should now use this instead:

jQuery._data( elem, "events" );

elem should be an HTML Element, not a jQuery object, or selector.

Please note, that this is an internal, 'private' structure, and shouldn't be modified. Use this for debugging purposes only.

In older versions of jQuery, you might have to use the old method which is:

jQuery( elem ).data( "events" );

How to see where all events are bound for elements on a page?

There's Eventbug, an extension to Firebug, which

lists all of the event handlers on the page grouped by event type

Get all the events bound by .on() in jQuery

Since you bound your events to document element, try this:

$(document).data("events")

what events are bound?

If you are using Safari or Chrome, you can open up the Developer Tools and inspect the element (by clicking the magnifying glass). In the Event Listeners tab on the right it will tell you the binded events to that element, with their functions and locations.

OR to do this via code:

$('selector').data('events'); // get
console.dir($('selector').data('events')); // display in firefox firebug or webkit's developer tools

Trigger all jQuery events bound to an element

Or you could do it like that to:

DEMO jsFiddle

 $('.form-type-radio').click(function (e) {
     if(e.target != this) return;
     var input = $(this).find('input')[0],
         inputEvents = $._data(input, 'events');
     $.each(inputEvents, function (k, o) {
         $(input).triggerHandler(k);
     });
 });

If DIV contains more than just one input, use a for loop:

DEMO jsFiddle

$('.form-type-radio').click(function (e) {
     if (e.target != this) return;
     var inputs = $(this).find('input').get();
     for (var i = 0, z = inputs.length; i < z; i++) {
         var inputEvents = $._data(inputs[i], 'events');
         $.each(inputEvents, function (k, o) {
             $(inputs[i]).triggerHandler(k);
         });
     }
 });

NOTE: this will only works for events bound using jQuery.

---

Related Topics