Simulation code of jQuery implementation principle -3 Event handling_jquery

In the private extension object of the object, an event management object named events is specially added. Each event on this object corresponds to an attribute with the same name. The value of this attribute is an array. The handler for this event is pressed in sequence. into this array to form a list of event handlers. The custom event handling function is pushed into this list.

When the event is triggered, jQuery.event.handle is executed through the registered anonymous function. Since a closure is used, this in this function is the event source object. The object is found through this event source object. private extended data, and then find the corresponding event handler list in events, and finally execute them in sequence.

Copy code The code is as follows:

///
// #2076
// The id used to generate the event handler function
jQuery.guid = 1;
//jQuery’s event object
jQuery.event = { // # 1555
// Add an event to the object
// elem adds the element of the event, type is the name of the event, handler Event handler, data event-related data
add: function (elem, type, handler, data) {
var handleObjIn, handleObj;
// Confirm that the function has a unique ID
if ( !handler.guid) {
handler.guid = jQuery.guid;
}
// Get the cache data object corresponding to this element
var elemData = jQuery.data(elem);
//Get the event object on the cache object corresponding to the element and the handler common to all events
var events = elemData.events = elemData.events || {};
var eventHandle = elemData.handle;
//Whether there is already only one event processing function handle, jQuery.event.handle is used.
// By using closure, this function refers to the current event object and parameters.
if (!eventHandle) {
elemData.handle = eventHandle = function () {
return jQuery.event.handle.apply(eventHandle.elem, arguments);
};
}
// Allows 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 form of array
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 handling 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 handler function is in a stack, and later jQuery.event.handle will find the actual handler
handlers here. push(handleObj);
// Nullify elem to prevent memory leaks in IE
elem = null;
},
global: {},
// Real event handler function,
// Since it is called through return jQuery.event.handle.apply(eventHandle.elem, arguments)
// Therefore, this at this time 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;
// On the current event object Find the event handler list
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 var handleObj = handlers[j];

// Get the parameters saved when registering the event
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 event
for (var i = 0, l = this.length; 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 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, for the element with the id msg on the page, you can register a click event handler function through the following code.

Copy code The code is as follows:

// Event operation
$("#msg ").click(
function () {
alert(this.innerHTML);
}
);