Can I find events bound on an element with jQuery?

Question

I bind two event handlers on this link:

<a href='#' id='elm'>Show Alert</a> 

JavaScript:

$(function() {   $('#elm').click(_f);   $('#elm').mouseover(_m); });  function _f(){alert('clicked');} function _m(){alert('mouse over');} 

Is there any way to get a list of all events bound on an element, in this case on element with id="elm"?

Answer 1

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.

Answer 2

General case:

• Hit F12 to open Dev Tools
• Click the Sources tab
• On right-hand side, scroll down to Event Listener Breakpoints, and expand tree
• Click on the events you want to listen for.
• Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can:

• right click on the target element -> select "Inspect element"
• Scroll down on the right side of the dev frame, at the bottom is 'event listeners'.
• Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)