Detailed explanation of events bound to dom elements in jQuery_jquery

As a professional instinct of technology fanatics, when I see the functions of a technical product, I can’t help but wonder how it is implemented. For example, every time I see a cool interface or cool function on someone else’s website, I can’t help but open the browser console. . .

Okay, without going too far, let’s talk about what you should do when you want to see the code of an event function bound to an element on the website.

View the natively bound event function code

The so-called native is to bind to the dom element through the addEventListener method. This is easy to do:

Inspect the element bound to the event (right click on it ->Inspect element) In the console of the pop-up Elements view, click the "Event Listeners" tab on the right side and then you can see all the elements bound to the element. When the event occurs, click it, find the handler, right-click the mouse, and select the "Show Function Definition" menu. You can jump to the source code location of the event function bound to the element. There are pictures and the truth:

View the event function code bound by jquery

Well, I know, you have encountered a problem, right? For all the event functions bound by jquery, you will jump to the jquery code through the above method, and it will always be in that place. Seeing it is the same as not seeing it. Therefore, Brother Bao is here to teach you how to view jquery.

Also to inspect the element click on the "Properties" view. Select the first one, expand it and find an attribute like 'jQueryxxxxx (a string of numbers)', remember its value (usually a number) N

Then switch to the Console view on the left and execute $.cache[N] in the console. N here is the previous attribute value

Then the things bound to this element will come out. Expand events, and there will be the actual function you want to view. Right-click the function... after the handle under the specific event, and then select "Show Function Definition" to see it.

Example=》http://demo.sudodev.cn/frontend/jqDetectView the event function code bound to jquery2.x version

Okay, I know, you must have encountered problems again. Because when you use the jquery2.x version of jquery, the above method will no longer work. The reason is that the code structure of 2.x has changed. In fact, the events of the 2.x version still use the cache mechanism, but they are not exposed to the outside like the 1.x version. Instead, they are encapsulated and exist in the closure object data_priv, and the compressed version of jquery is generally used. , you cannot view this data_priv name. So after checking the source code of the jquery2.x version, Brother Bao teaches you how to locate it:

Go directly to the console and construct an object containing jQuery to view jQuery in the console. For example, enter var o={j:$}. The advantage of this is that you can view all properties of jQuery

in the control bar after execution.

Then expand the jQuery (here is j) object in the console, find the _queueHooks method, and see that its code is probably "return L.get(a,c)||L.access...", mark it down Living in this L may or may not be L)

Expand any first-level object below j, such as _queueHooks above, find Expand, then expand Closure below, find the "L" couplet in front, right-click on the letter behind it, and select "Store as Global Variable”

Then a tempX object is displayed in the console, which contains the cache. Let's say it's called temp1. That temp1 has a get method that can directly obtain its cache object. Suppose you want to view the id of the object bound to the event called clickMe. Then execute temp1.get($('#clickMe').get(0)) (or temp1.get(document.querySelector('#clickMe')))) and it will print something equivalent to the jquery1.x version above

The following example is the same as the jquery1.x method above=》http://demo.sudodev.cn/frontend/jq2DetectAnother:

The above operations are done under the Chrome browser by default. In fact, it is similar under Firefox. I believe that as a technician, you should be able to draw inferences from one example. As for IE, uh... pretend I didn't say it. :)

Update:

1. In order to save the trouble of checking attributes, jquery1.x can directly execute $.cache[$('#clickMe').get(0)[$.expando]] on the console to output the things bound to the element, instead of first checking the value of the jQueryxxxxxxx attribute on the element

2. After an article review and test. There is a new method that is currently the most labor-saving and applicable to jquery1 and jquery2. Enter $._data($('#clickMe').get(0)) directly in the console to output everything bound to the element. However, from the comments in the jquery2 source code, we found that $._data will be abolished in future versions. So the method introduced above is still very valuable. It’s better to teach people to fish than to teach them to fish, :)