Find events bound on an element with jQuery

First Way:

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.

Second way:

• 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)