On the problem of the source location of JQuery event _jquery

Source: Internet
Author: User

Yesterday, someone in the group asked an event source location problem, the simple description is like this.

On a page that isn't written by yourself, how can you quickly locate the event code he's bound to? (The page is in jquery)
This question, say difficult, say simple also not so simple, in case of use is commissioned and so will trouble point.

There's an event Listeners in the Chrome console that shows you the events of your chosen element, and if it's a native event, he'll show it directly,
You click on the event will jump to the corresponding code, but the jquery binding event is not the case, you click will only jump to the jquery source,
Min After the jquery source of dense, looking at all dazzled.

As for the management of the events in jquery, Daniel is very thorough, and I don't want to talk about it, because it's not the point we're going to make today.
The point we want to make is how to navigate to the event source. Because the jquery version is numerous and has been refactored several times, it is a case in point.

Basically, 1.2.6-1.8 and 1.9 are tested and are generally set to the following 2 versions
1.2.6-1.8 with $.data (Elem, "events", undefined, true);
1.9+ with $._data (Elem, "events");

PS: You can now also press F12 to open the console to see the results, of course, you can copy the source code below their own test.
Because Google was the wall of the fierce, so the CDN replaced by Baidu. 2014-06-07

<!doctype html>  

If it's not an accident, you can see the display on the console.

When you expand, you can see that the version in the bound function argument corresponds to the current version.

Can see
1.2.6-1.4 only supports $.data (Elem, "events", undefined, true);
1.5-1.8 both support
1.9-1.11 only supports $._data (Elem, "events");

So we can write a function with simple compatibility, and then he's completely compatible.

function Lookevents (elem) {return
  $.data? $.data (Elem, "events", Undefined, true): $._data (Elem, "events"); 
   }

Call lookevents now to get the corresponding events object.

Although we can see the custom events we bind, we still don't know which file he is in.

Below we will locate his specific position, we take 1.7 to try.
PS: The following operations are done in the console, my environment is the chrome 34

function Lookevents (elem) {return
  $.data? $.data (Elem, "events", Undefined, true): $._data (Elem, "events"); 
   }
var event = lookevents ($ ("#testbtn") [0]);//Get the bound event
Event.click[0].handler//Get the first event source address of the Click event

Copy to the console, press ENTER to run, no surprises can see the following results.

Have you seen the lower right corner of the 1.html:36 this is the source of the file and the corresponding line number.
You can directly click 1.html:36 Jump to the corresponding code, is not feel very strong AH.

The above method applies to the 1.5+ version of JQuery, a little different for the 1.2.6-1.4 version, but very simple.

function Lookevents (elem) {return $.data? $.data (Elem, "events", Undefined, true): $._data (Elem, "events");} var event = lookevents ($ ("#testbtn") [0]); Gets the bound event Event.click; See a few click events, if you want to see other events enter the event directly and then return to

The code seen above is the corresponding event handle, such as my 1,2 event (shown below), this number is not in order, this should be noted.
EVENT.CLICK[1]//Get the event source address of the Click event ID is 1
No surprises to see the following results.

From the operation, whether it is 1.2.6-1.4 or 1.5+ version is similar, just 1.5+ use array mode management function handle, more convenient.
All right, that's all said and done, little friends, all kinds of tests.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.