Read jquery's eleven (add event core method)

In the previous article, adding events in jquery is provided to the client. Program There are many bind/click methods, but the core method is jquery. event. Add. This article takes a look at its source code. The add definition is as follows (Omitted in most cases)

 
Add: function (ELEM, types, handler, data) {If (ELEM. nodetype = 3 | ELEM. nodetype = 8) {return ;}...}
 

Four parameters, ELEM, types, handler, and data, are defined as htmlelement, event type (such as click), event response function, and data. In addition, types can separate multiple events ("Mouseover mouseout") with spaces "). Handler is sometimes an object (when live is implemented ). Data will end with the extended Event object, that is, the attribute of the event. Event will be obtained in handler as the first parameter, so that data can be obtained in handler.

The following details

 
If (ELEM. nodetype = 3 | ELEM. nodetype = 8) {return ;}
 

The text and comment nodes return directly.

If (handler = false) {handler = returnfalse;} else if (! Handler) {// fixes bug #7229. Fix recommended by jdaltonreturn ;}
 

When handler is set to false, handler is assigned a value of returnfalse and a value of returnfalse as a function, as shown below:

 
Function returnfalse () {return false ;}
 

Jquery blocks the default behavior of elements by setting handler to false and stops event bubbling. This should be viewed in conjunction with jquery. event. Handle.

 
VaR handleobjin, handleobj; If (handler. Handler) {handleobjin = handler; handler = handleobjin. Handler;} // make sure that the function being Ted execuhas a unique idif (! Handler. guid) {handler. guid = jquery. guid ++ ;}
 

Define the handleobjin and handleobj variables.

Handler is literally an Event Response (callback) function, but handler. Handler appears here, which is strange. When Will handler be passed in as a JS object?

Most of the time, the function type is passed. If you look at the jquery. event. Add call in the source code, you can find that jquery will pass the object type when implementing live. As follows:

Add: function (handleobj) {jquery. event. add (this, liveconvert (handleobj. origtype, handleobj. selector), jquery. extend ({}, handleobj, {handler: livehandler, guid: handleobj. handler. guid }));},
 

In this case, handleobjin is assigned as the passed JS object. The real handler is handleobjin. Handler. This is a bit difficult to understand.

 
// Make sure that the function being executed has a unique idif (! Handler. guid) {handler. guid = jquery. guid ++ ;}
 

The passed handler parameter adds a property guid as a number starting from 1. When you use jquery to add events, the property GUID is added to the Event Response Function by default. This GUID is used to delete events.

 
// Init the element's event structurevar elemdata = jquery. _ data (ELEM );
 

Obtain elemdata first. Here we use the jquery. _ data mentioned above. The first time you add an event for htmlelement, elemdata is an empty object ({}).

// If no elemdata is found then we must be trying to bind to one of the // banned nodata elementsif (! Elemdata) {return ;}
 

If elemdata does not exist, return directly.

 
VaR events = elemdata. Events, eventhandle = elemdata. Handle;
 

Define events and eventhandle. At the same time, both variables are undefined.

 
If (! Events) {elemdata. Events = events ={};} if (! Eventhandle) {elemdata. handle = eventhandle = function (e) {// discard the second event of a jquery. event. trigger () and // when an event is called after a page has unloadedreturn typeof jquery! = "Undefined "&&(! E | jquery. event. triggered! = E. Type )? Jquery. event. Handle. Apply (eventhandle. ELEM, arguments): undefined ;};}
 

Assign values to elemdata. Events and elemdata. Handle.

// Add ELEM as a property of the handle function // This is to prevent a memory leak with non-native events in IE. eventhandle. ELEM = ELEM;
 

Temporarily store ELEM to eventhandle. When you delete event registration, it is set to null to avoid Memory leakage in Some browsers.

 
// Handle multiple events separated by a space // jquery (...). BIND ("Mouseover mouseout", FN); types = types. Split ("");
 

Converts a string into an array with spaces as the delimiter. This statement allows you to add multiple events at a time. The handler of multiple events is the same.

Followed by a while loop

 
While (type = types [I ++]) {handleobj = handleobjin? Jquery. Extend ({}, handleobjin): {handler: handler, data: Data };...}
 

Loop array, which is processed in sequence as follows

1. Get handleobj

2. process the event namespace by the period. If type is a bit numbered, it has a namespace. Otherwise, no

3. Add the type and guid attribute to handlerobj. Used in subsequent event Deletion

4. handlers and special are obtained. In most cases, addeventlistener/attachevent is used to add events. The special variable shows that special events such as ready, beforeunload, and live events are specially handled. Ready calls jquery. bindready, while jquery. bindready calls addeventlistener/attachevent internally. Beforeunload is added using window. onbeforeunload. Live is an event proxy, and its processing is also special.

5. Add handleobj to the array handles.

The last sentence of jquery. event. Add solves Memory leakage in IE.

 
// Nullify ELEM to prevent memory leaks in ieelem = NULL;
 

I made a diagram of the data structure of jquery event management. As follows: