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