JS Debugging tool View list of events bound by DOM elements

As a technical fanatic of the professional instinct, see a technology product function, always can't help but want to know how it was achieved. For example, I often see someone else's website a very flashy interface or cool features, can not help but open the browser's console ...

Well, not far, say what you should do when you want to see the code for an event function bound by an element on the site. to view the native bound event function code

The so-called native is bound to the DOM element through the AddEventListener method. This is good to do: review the elements of the binding event (right-> review Element) in the pop-up elements view of the console, right click on the "Event Listeners" tab and then you can see all the events bound to the element, point open, find the handler, right click on the mouse, Select the show Function Definition menu. You can jump to the source location of the event function that is bound to the element. Have a picture of the truth: view jquery bound event function code

Well, I know, you're having a problem with all the jquery-bound event functions that you jump through in the way above are jquery code, and that's always the place. I looked like I didn't see it. So, brother Bao is here to teach you how to view jquery. or the review element click "Properties" view. Select the first one, expand to find a ' jqueryxxxxx (a bunch of numbers) ' Such a property, remember its value (usually a number) N then left to the console view, in the console to execute $.cache[n], where the N is the previous attribute value And then it's going to come out and tie it to something on this element. Unfold events, and there is the real function you want to see. Right-click the Function following the handle of the specific event ... and choose Show function Definition to see it.
View the event function code for the jquery2.x version binding

OK, I know, you must be having a problem again. Because when you use the jquery2.x version of jquery, the above method is not work, because the 2.x code architecture has changed. In fact, the 2.x version of the event is still used in the cache mechanism, but not like the 1.x version exposed to the outside, but encapsulated, and there is a closed-package object Data_priv, and generally using the compressed version of jquery, the Data_priv name you can not see. So after checking out the jquery2.x version of the source code, Brother Bao teaches you how to locate it: go directly to the console and construct a jquery-containing object to view jquery in the console. For example, to enter Var o={j:$}, the advantage is that you can see all the properties of jquery in the control bar and then expand jquery (Here is j) object in the console, find _queuehooks this method, see its code is probably "return L.get" (A , c) | | L.access ... "This, remember this l may also be not L) expand any one of the first layer of J object, such as the above _queuehooks, find expansion, and then expand the following closure, find the front of the" L "pairs of words, the letter behind it right, select" Store as Global Variable "then the console to play a Tempx object, it is loaded with the cache of Dongdong." Suppose it's called Temp1. The Temp1 has a get method that can directly retrieve its cache object. If you want to see the ID of the object that binds the event is called ClickMe. That executive Temp1.get (' #clickMe '). Get (0)) (or Temp1.get (Document.queryselector (' #clickMe ')) will play the same thing as the jquery1.x version above It's just like the jquery1.x on the back.
another:

The above default is in the Chrome browser to do the operation, in fact, under Firefox is similar, believe that as a technician, you should be able to extrapolate. As for IE, uh ... When I didn't say hello. :) Update:

1. To eliminate the hassle of viewing properties, jquery1.x can perform $.cache[$ (' #clickMe ') directly on the console. Get (0) [$.expando]] The output element is bound Instead of first looking at the value of the jqueryxxxxxxx attribute on the element.

2. After a review and test. There is a new, currently the most energy-saving and jquery1,jquery2 applicable approach is to enter the $._data (' #clickMe ') directly in the console. Get (0), you can lose the binding element. However, the comments from Jquery2 's source code found that $._data would be abolished in the new version later. So the method described above is still very valuable. Teach a man to fish, and give him a fishing.