Simulation code of jQuery implementation principle-3 event handler _ jquery

In jQuery, the actually registered event handler is an anonymous closure function, which is processed by calling jQuery. event. handle. An event management object named events is added to the private extension object of the object. On this object, each event corresponds to an attribute with the same name. The attribute value is an array, the handler for this event is pushed into this array in turn to form a list of event processing. The Custom Event Handler function is pushed into this list.

When an event is triggered, the registered anonymous function is used to execute jQuery. event. handle. Because closures are used, this in this function is the event source object. You can use this event source object to find the private extended data of the object, find the corresponding event handler list in events, and then execute it in sequence.

The Code is as follows:

///
// #2076
// Id used to generate the event processing function
JQuery. guid = 1;
// JQuery event object
JQuery. event = {// #1555
// Add an event to the object
// Elem adds the event element, type event name, handler event handler, and data related to data events.
Add: function (elem, type, handler, data ){
Var handleObjIn, handleObj;
// Confirm that the function has a unique ID.
If (! Handler. guid ){
Handler. guid = jQuery. guid ++;
}
// Obtain the cache data object corresponding to this element
Var elemData = jQuery. data (elem );
// Obtain the event object on the cache object corresponding to the element and the processing program shared by all events
Var events = elemData. events = elemData. events || {};
Var eventHandle = elemData. handle;
// Whether there is only one event handler handle. jQuery. event. handle is used.
// Use the closure to make this function reference the current event object and parameter.
If (! EventHandle ){
ElemData. handle = eventHandle = function (){
Return jQuery. event. handle. apply (eventHandle. elem, arguments );
};
}
// Enables the closure handler to find the event source object
EventHandle. elem = elem;
//
HandleObj = {handler: handler, data: data };
HandleObj. namespace = "";

HandleObj. type = type;
HandleObj. guid = handler. guid;
// Each event can have a series of handlers in the array format
Var handlers = events [type],
Special = jQuery. event. special [type] || {};
// Init the event handler queue
If (! Handlers ){
Handlers = events [type] = [];
// Check for a special event handler
// Only use addEventListener/attachEvent if the special
// Events handler returns false
// Complete the actual event registration
// The actual event processing function is eventHandle.
If (! Special. setup | special. setup. call (elem, data, namespaces, eventHandle) === false ){
// Bind the global event handler to the element
If (elem. addEventListener ){
Elem. addEventListener (type, eventHandle, false );
} Else if (elem. attachEvent ){
Elem. attachEvent ("on" + type, eventHandle );
}
}
}
// The custom processing function is in a stack. Then, jQuery. event. handle will find the actual processing program here.
Handlers. push (handleObj );
// Nullify elem to prevent memory leaks in IE
Elem = null;
},
Global :{},
// Real event processing functions,
// Because it is called through return jQuery. event. handle. apply (eventHandle. elem, arguments)
// Therefore, this is the event source object, and event is the event parameter.
Handle: function (event) {// 1904
Var all, handlers, namespaces, namespace, events;
Event = window. event;
Event. currentTarget = this;
// Locate the event processing list on the current event object
Var events = jQuery. data (this, "events"), handlers = events [event. type];
If (events & handlers ){
// Clone the handlers to prevent manipulation
Handlers = handlers. slice (0 );
For (var j = 0, l = handlers. length; j <l; j ++ ){
Var handleObj = handlers [j];

// Obtain the parameters saved during event registration
Event. handler = handleObj. handler;
Event. data = handleObj. data;
Event. handleObj = handleObj;
Var ret = handleObj. handler. apply (this, arguments );
}
}
Return event. result;
},
// #2020
Special :{}
}
// Bind Function Definition
JQuery. fn. bind = function (type, fn)
{
Var handler = fn;
// Call jQuery. event. add to add an event
For (var I = 0, l = this. length; I <l; I ++ ){
JQuery. event. add (this [I], type, handler );
}
Return this;
}
JQuery. fn. unbind = function (type, fn ){
// Handle object literals
If (typeof type = "object "&&! Type. preventDefault ){
For (var key in type ){
This. unbind (key, type [key]);
}
} Else {
For (var I = 0, l = this. length; I <l; I ++ ){
JQuery. event. remove (this [I], type, fn );
}
}
Return this;
}
// Click event registration method
JQuery. fn. click = function (fn ){
This. bind ("click", fn );
Return this;
}

In this way, you can use the following code to register a click event handler for elements with the id of msg on the page.

The Code is as follows:

// Event operations
$ ("# Msg"). click (
Function (){
Alert (this. innerHTML );
}
);