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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
