A detailed explanation of the events on the DOM elements in jquery _jquery

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 key-> review element) in the pop-up elements view console, right click on the "Event Listeners" tab and then you can see all the events bound to the element, point open, find handler, right mouse click, select " Show Function Definition menu. You can jump to the source location of the event function that is bound to the element. There is a picture of the truth:

View the event function code for jquery bindings

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 attributes, remember its value (usually a number) N

Then left to the console view, executed in the console $.cache[N] , where 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.

Example = "Http://demo.sudodev.cn/frontend/jqDetect view jquery2.x version bound event function code

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 viewing the jquery2.x version of the source code, Bao brother taught you how to locate it:

Go directly to the console and construct a jquery-containing object to view jquery in the console. For example var o={j:$} , the advantage of doing this is that you can see all the attributes of jquery in the control bar after you execute it

Then in the console expand jquery (Here is j) object, 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 below the object, such as the above _queuehooks, find the expansion, and then expand the following closure, find the "L" in front of the sentence, to the letter behind it right button, 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. Then the execution temp1.get($('#clickMe').get(0)) (or temp1.get(document.querySelector('#clickMe')) ) will play the same thing as the jquery1.x version above.

The following is the same as the above jquery1.x example = "Http://demo.sudodev.cn/frontend/jq2Detect 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. In order to eliminate the hassle of viewing properties, jquery1.x can perform the binding of the output elements directly on the console $.cache[$('#clickMe').get(0)[$.expando]] , instead of first looking at the value of the jqueryxxxxxxx attribute on the element.

2. After a review and test. One of the most current and jquery1,jquery2 ways to do this is to simply type in the console and lose everything that is $._data($('#clickMe').get(0)) bound to the 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.