JQuery displays the list of events bound to the dom element, jquerydom

JQuery displays the list of events bound to the dom element, jquerydom

As a technical enthusiast, you can't help but wonder how a technical product is implemented. For example, I can't help opening the browser console every time I see a dazzling interface or a cool function on other websites...

Well, don't go far. Let's talk about how to do it when you want to see the code of the event function bound to an element on the website.

View native Bound event Function Code

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

• Review the element of the Bound event (right-click it-> review element)
• In the pop-up Elements view console, click the "Event Listeners" tab on the right.
• Then you can see all events bound to this element. Click it, find handler, right-click, and select the "Show Function Definition" menu. You can jump to the source code of the event function bound to this element. There is a picture with the truth:

View the event function code bound to jquery

Well, I know, you have encountered a problem. All the event functions bound to jquery, through the above method, jump to the jquery code, and will always be that place. I saw it. Therefore, Bao Ge teaches you how to view jquery.

• Review Elements
• Click "Properties" view. Select the first one and expand
• Find an attribute like 'jqueryxxxxx (a string of numbers) 'and remember its value (usually a number) N
• Switch to the Console view on the left and run$.cache[N]Here, N is the previous attribute value.
• Then something bound to this element will come out. Expand events to display the real functions you want to view.
• Right-click the function after the handle under the specific event ..., Select "Show Function Definition.
• Http://demo.sudodev.cn/frontend/jqDetect example =

View the event function code bound to jquery2.x

Okay, I know. You must have encountered another problem. When you use jquery of jquery2.x, the above method does not work, because the code architecture of 2.x has changed. Actually 2. the events in Version x are still using the cache mechanism, but not like 1. the x version is exposed to the outside, but encapsulated, And the closure object data_priv exists, and the jquery compression version is generally used. You cannot view the data_priv name. So after checking the source code of jquery2.x, Bao Ge teaches you how to locate it:

• Directly go to the console and construct an object containing jQuery to view jQuery in the console. For example, inputvar o={j:$}In this way, you can view all jQuery attributes in the control bar after execution.
• Then expand the jQuery (j) object in the console, find the _ queueHooks method, and see that its code is probably "return L. get (a, c) | L. access ..." In this case, remember whether this L may be L)
• Expand the first-layer objects under any j, for example, the above _ queueHooks, find the extension, expand the Closure below, and find the previous "L" clause, right-click the letter behind it and select "Store as Global Variable"
• Then, a tempX object is displayed in the console, which is the stuff with the cache. Suppose it is called temp1.
• That temp1 has a get method that can directly obtain its cache object. Assume that you want to view the id of the object bound to the event is clickMe. Then executetemp1.get($('#clickMe').get(0))(Ortemp1.get(document.querySelector('#clickMe'))) It will display something equivalent to jquery1.x above.
• The method is the same as that of jquery1.x.
• Http://demo.sudodev.cn/frontend/jq2Detect example =

In addition:

By default, the above operations are performed in the chrome browser. In fact, they are similar in Firefox. I believe that, as a technician, you should be able to draw a different picture. As for IE, uh... When I did not say that. :)

Update:

1. To save the trouble of viewing attributes, jquery1.x can be executed directly on the console.$.cache[$('#clickMe').get(0)[$.expando]]Instead of checking the property value of jQueryxxxxxxx on the element.

2. I have gone through a review and test. There is a new method that is most labor-saving and applicable to both jquery1 and jquery2.$._data($('#clickMe').get(0))To output all the items bound to the element. However, it is found from the comments of jquery2 source code that $. _ data will be abolished in later versions. Therefore, the method described above is still very valuable. It is better to teach people to fish than to teach them to fish ,:)