"jquery source" event storage structure

A. jquery incident prototype--dean Edwards's cross-browser addevent () design

SOURCE Interpretation

View Code

Re-comb the data structure, using an example

<input type= "text" id= "Chua" onclick= "F0 ();" >function F0 () {...} Function F1 () {...} function F2 () {...} Function F3 () {...} var dom = document.getElementById ("Chua"), Addevent (DOM, "click", F1), addevent (DOM, "change", F1); Addevent ( DOM, "Change", F2); Addevent (DOM, "click", F3); Addevent (DOM, "Change", F3);

After passing the addevent () function, the current data structure is:

Element: {onclick:handleevent (event),   main listener function for//click event
Onchage:handleevent (event), the main listener function of the//change event
Events: {click:{//This is an array of classes 0:F0,//element an existing    event 1:f1,//subscript 1 is actually f1.$ $guid 3:f3    //Subscript 3 is actually F3. $ $guid, it is important to note that each response event has a unique $ $guid as subscript ...}, change:{//this is an array of classes 1:F1,
2:F2,
3:F3}}}    

The event system marks $ $guid for each response function (that is, the third parameter handler in addevent (element, type, handler), according to the order in which the addevent are called. Source

Ensure that each different event response function has only one ID    if (!handler.$ $guid) handler.$ $guid = addevent.guid++;

The $ $guid tags for the final three response functions are

f1.$ $guid = 1

f2.$ $guid = 2

f3.$ $guid = 3

And according to the source code

    handlers[handler.$ $guid] = handler;

Then the subscript position of a function in any event response function set is fixed. For example, the click and Change events call F3 as the response event, so the F3 in Element.events.click and Element.events.change are f3.$ $guid = 3; i.e. element.events.click[3] = element.events.change[3] = F3.

This time it is assumed that a new event binding is added: Addevent (DOM, "Focus", F3), then element.events.focus[3] = F3; This is also the convenience of the object compared to the array, the array can not without subscript 0,1,2 directly have 3, But the object can, at this point, 3 is a property name as an object.

This design, in fact, already has the JQuery Event system prototype, contains a few of the most important features:

　　1) All events on element will be saved to the element.events attribute, not directly bound to element, so an event can have countless response functions.

2) Handleevent, as the "main listener function" for all events in element, has it uniformly manages all functions on element.

3) All browsers support element["on" + Type] Event binding method, cross-browser compatible.

　　

Well, understanding the structure of Addevent's event, this idea really makes people feel bright. The following analysis of the event structure of jquery

B. The event structure of jquery

All function Add events will enter the JQuery.event.add function. The function has two main functions: adding events, attaching many event-related information. We directly on the source, the source of ideas and Dean Edwards's cross-browser-compatible event add processing similar.

SOURCE Analysis

View Code

Still use examples to illustrate the event structure of jquery

<div id= "#center" ></div><script>  function Dohander () {Console.log ("Dohander")};  function dot () {console.log ("dot");}  $ (document). On ("Click", ' #center ', Dohander). On ("click",  ' #center ', dot). On ("click"  , Dot);</script>

After adding the processing link, the event is added to the element, and the corresponding data is added to the cached data of the node. The structure is as follows

 elemdata = Jquery._data (elem); elemdata = {events: {click: {//array[3] 0: {data:undefined/{...} ,  guid:2 ,//handler ID  handler : function Dohander () {...}, namespace: ""　　　　　　　　, Needscontext:false, Origtype: "Click",  selector : "#center",//selector, used to distinguish between different event sources Type: "Click"} 1: {data:undefined/{...}, guid:3, Handler:function dot () {...}, NA 　　　　　　Mespace: "", Needscontext:false, Origtype: "Click", selector: "#center", type: "Click"} 2: {data:undefined, guid:3, Handler:function dot () {...}, namespace: ", Needsco Ntext:false, Origtype: "Click", selector:  undefined , type: "Click"} dele gatecount:2,//the number of delegate events, selector is the delegate event Length:3}} handle:function (e) {...} /* Event handling Main entry */{elem:document//belongs to handle object's feature}} 

The processing of jquery is similar to the addition of Dean Edwards ' cross-browser-compatible events, such as adding a GUID for each function, storing a list of response events with the events object, a total event handling entry handle, and so on.

　　What improvements have been made to jquery?

1) The event data is no longer stored directly on the node, but is used within the jquery cache system (internal cache Jquery._data method Access)

2) event delegate: A handler that is bound to the current node (the current node in the example is the document root node) does not only contain events that are handled when the current node triggers an event (click) response (the selector is the corresponding processing function dot in the case of undefined); It also proxies the events that are handled when the other node (the #center node in the example) triggers the event (click) response (in the example selector "#center" corresponds to the processing event dohandler and Dot), and the delegation mechanism is analyzed later.

3) added a lot of function data, such as namespace namespace: This is mainly used in custom event custom triggers, such as $ (document). On ("Chua.click", ' #center ', dot), active trigger $ ("#center"). Trigger ("Chua.click"). There is additional data: although it is not seen that the place has been used.

"jquery source" event storage structure