Alexander Pavlov's answer gets the closest to what you want.
Due to the extensiveness of jQuery's abstraction and functionality, a lot of hoops have to be jumped in order to get to the meat of the event. I have set up this jsFiddle to demonstrate the work.
1. Setting up the Event Listener Breakpoint
You were close on this one.
- Open the Chrome Dev Tools (F12), and go to the Sources tab.
- Drill down to Mouse -> Click
(click to zoom)
2. Click the button!
Chrome Dev Tools will pause script execution, and present you with this beautiful entanglement of minified code:
(click to zoom)
3. Find the glorious code!
Now, the trick here is to not get carried away pressing the key, and keep an eye out on the screen.
- Press the F11 key (Step In) until desired source code appears
- Source code finally reached
- In the jsFiddle sample provided above, I had to press F11 108 times before reaching the desired event handler/function
- Your mileage may vary, depending on the version of jQuery (or framework library) used to bind the events
- With enough dedication and time, you can find any event handler/function
4. Explanation
I don't have the exact answer, or explanation as to why jQuery goes through the many layers of abstractions it does - all I can suggest is that it is because of the job it does to abstract away its usage from the browser executing the code.
Here is a jsFiddle with a debug version of jQuery (i.e., not minified). When you look at the code on the first (non-minified) breakpoint, you can see that the code is handling many things:
// ...snip...
if ( !(eventHandle = elemData.handle) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
// ...snip...
The reason I think you missed it on your attempt when the "execution pauses and I jump line by line", is because you may have used the "Step Over" function, instead of Step In. Here is a StackOverflow answer explaining the differences.
Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function in turn goes through some abstraction layers and checks, and somewhere in there, it executes your function.