jquery binding principle simple analysis and implementation code sharing_jquery

There is a data method in jq, which binds relevant data to DOM elements. When an event is bound to the dom using the jq method, the corresponding time list will be generated
You can see the example below (please view it in firefox because objects in firefox support toSource())

Copy code The code is as follows:

data is used to bind data to elements
The data source is the cache object
When the element is bound to data, an attribute jQueryxxx xxx will be added to the element. For the timestamp of jq execution
It should be explained here that there is a uuid which is accumulated
The value of jQueryxxx is this uuid
The key of cache is this uuid
The value is the data to be stored
data is very important for event binding........................

Copy code The code is as follows:

function now(){
return new Date;
};
var win = this,
expando = "jQuery" now(),
uuid = 0,
cache = {};
win.data = function(elem, name, data){
var id = elem[expando];
if(!id)
id = elem[expando] = uuid;
if(name&&!cache[id])
cache[id] = {};
if(data !== undefined)
cache[id][name] = data;
return name
? cache[id][name]
: id;
}
win.removeData = function(elem, name){
var id = elem[expando];
if (name){
if (cache[id]) {
delete cache[id][name];
name = "";
for ( name in cache[ id ] )
break;
if ( !name )
removeData(elem);
}
}else{
try {
delete elem[expando];
} catch(e){
if ( elem.removeAttribute )
elem.removeAttribute( expando );
}
delete cache[id];
}
}
win.each = function( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
} else
for ( ; i if ( callback.apply( object[ i ], args ) === false )
break;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i }
return object;
}

Then add the event
jq which is in jQuery.event The add method
implements some functions in the add method
takes the events of the element and handles the data bound by these two data
events stores the event list
The format is as follows
{
click: [{handler:function(){},type:"click",guid:'xx'}.....],
mouse:[......]
}
Handle is the executed function
(all execution functions are the same. They traverse the event list to execute the corresponding event)
Then traverse the types because multiple events can be bound
The callback function also There will be several attributes
assuming the callback function is handler
handler.guid = gevent.guid
handler.type = name
name should be considered a special name for easy deletion
such as
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
name is d
Delete You can only delete the d event without deleting the click event above
Finally, bind the event to the element, but the functions executed are all
function(){
gevent.handle.apply(arguments.callee .elem, arguments);
});

Copy code The code is as follows:

win.gevent = {
guid : 1,
add : function (elem, types, handler){
if ( elem.nodeType == 3 || elem.nodeType == 8)
return;
if ( elem.setInterval && elem != window )
elem = window;
//Give the function a unique index to facilitate deleting the event later
if ( !handler.guid )
handler.guid = this.guid ;
//Get the data under the events handle of the element
var events = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle is when various behaviors are triggered The function that will be executed
gevent.handle.apply(arguments.callee.elem, arguments);
});
handle.elem = elem;
//Traverse the event name because it can be click mouseover
each(types.split(/s /), function(index, type) {
var namespaces = type.split(".");
//Get the event name
type = namespaces .shift();
//Removing the thing after the dot is a special name. When deleting, you can specify to delete it, such as click.d
//Use the event type to record this special name
handler .type = namespaces.slice().sort().join(".");
//Get whether the event already exists in the events object
var handlers = events[type];
//If the event does not exist, bind the event to the element
if (!handlers) {
handlers = events[type] = {};
if (elem.addEventListener)
elem.addEventListener (type, handle, false);
else if (elem.attachEvent)
elem.attachEvent("on" type, handle);
}
//Place the function in the event of the element In the list
handlers[handler.guid] = handler;
});
elem = null;
}
}

gevent.hander is bound The function
that determines the actual execution of the event is also available in gevent.hander. The place is specially named but I don