jquery source exploration ---- event system Events
May 30, 2021 Article blog
Table of contents
Learn the depth of jquery and discover the exact beauty of jquery's interior, never thought jquery was necessary to do a website before, but now it seems that wanting to do a page with very few vulnerabilities, jquery is a sharp weapon.
Recently look at jquery source to see a lot, mainly look at some of the underlying support modules, but also probably know what the principle inside jquery is, although I can't remember may not remember a lot of APIs, but that doesn't matter, see the official website API, close your eyes also know what it is doing.
Today, I think one of the most complex modules inside jquery, the event system. This module one or two articles should be endless, then step by step with me to comb it!
Or, as usual, the previous picture first:
The inspector mode has been said before, and the jquery event system also takes advantage of the inspector mode, so before we introduce it, let's look at what jquery's data caching system is.
Why use jquery's event system?
(1) jquery data caching system
There are times when we need to attach some data to a js object or a DOM object, and we can add data to the js object without saying it, just object.data, but be aware when attaching data to the DOM element. Compare this to the following:
$(document).ready(function() {
var button = document.getElementById('button⑴');
button.onclick = function() {
console.log('hello'); return false;
};
});
The above situation is often written in this way, I have done before, but this kind of harm, in non-IE reader is no problem, but in the old IE browser to write the above sentence, the question comes:
IE's dom element garbage collection mechanism is the way to invoke counting, as to what way to invoke counting, you can Baidu, if this is to expand again, it will be a long, long time to say. L ooping assistance occurs, and as soon as it appears, it causes a memory leak. How does this cause circular assistance?
Obviously, in the closed-pack environment, there is a circular use, so how to solve this problem? That must be the data caching system.
How to avoid this kind of cycle situation? W e just need to break a usage pointer to be able to do that. Which one is it to destroy?
The function scope chain to invoke the outside button this pointer is obviously not good to break, because this is often the developer's easiest to write, then break button.click point to the anonymous function this.
So how do you destroy this path?
Let's take a look at how jquery's event caching system works:
In jquery, instead of directly invoking the object, a property jquery12123213 is set to the dom element for 1,1 as the basic data type, so there is no circular borrowing, but this 1 can correspond to property 1 in $.cache, so according to this one can find the corresponding event handler fn, whether it is wonderful, I think so.