jquery source code Exploration of the----Event system events (i)

Learning jquery in depth, found that jquery is really beautiful inside, never felt that jquery is to do the site must, but now it seems, want to do a very small page, jquery is a tool.

Recently look at the jquery source to see a lot, mainly to see some of the underlying support module, but also probably know what the principle of jquery inside, although can not remember a lot of API, but that is not important, see the official website API, closed eyes also know what it is.

Today I think that jquery is one of the most complex modules in the interior, the event system. This module a two articles should be not finished, then step by step with me to comb it!

Or as usual, the previous picture:

The observer pattern has been said before, and the jquery event System also applies the observer pattern, and before we introduce it, let's look at what jquery's data caching system is.

Why use jquery's event system?

(i) jquery data caching system

Sometimes, we need to add some data to the JS object or DOM object, append data to the JS object is not said, directly can object.data={}, but to attach data to the DOM element should pay attention to. For example, the following situation:

$ (document). Ready (function () {    var button = document.getElementById (' button-1 ');        Button.onclick = function () {            console.log (' hello ');        return false;        };});

Above this form of writing believe that we often write this, I used to be, but this has any disadvantage, in non-IE browser is not a problem, but in the old IE browser written above this sentence, the question comes:

IE's DOM element garbage collection mechanism is the way of reference counting, as to the reference count is what way, we can Baidu a bit, this if again, it will say a long time. Circular references occur as long as the circular reference is present, causing a memory leak. How does this cause a circular reference?

Obviously, in the closure environment, causing the circular reference, then how to solve this problem? That must be the data caching system.

How to avoid this cycle situation? All we have to do is break a reference pointer. Which one is it that destroys?

The function scope chain refers to the outside button this pointer is obviously not destructive, because this is often the most easily written by the developer, then destroy Button.Click point to the anonymous function.

So how do you break this path?

Let's see how the Event Caching system for jquery is doing,

In jquery, there is no direct reference to the object, but to the DOM element set a property jquery12123213 to the base data type, so there is no circular reference, but this 1 can be compared with the $.cache attribute 1, So according to this 1 can find the corresponding event handler function FN, it is not very clever, I think so.

OK, let's talk about it today.

jquery source code Exploration of the----Event system events (i)