On the object's private extension object, added a special event management object named events, where each event corresponds to an attribute with the same name, and the value of the property is an array, which, in turn, presses the handler for the event into the array, forming a list of event handlers. Custom event-handling functions are pressed into this list.
When an event is triggered, a registered anonymous function is used to perform jQuery.event.handle, and because of the closure, this is the event source object in this function, and the event source object finds the object's private extension data, and then in the events The corresponding list of event handlers is found in, and then executed sequentially.
Copy Code code as follows:
<reference path= "Jquery-core.js"/>
#2076
ID used to generate the event handler function
Jquery.guid = 1;
The event object of JQuery
Jquery.event = {//# 1555
adding events to Objects
Elem increases the element of the event, the name of the type event, the handler event handler, the data associated with the
Add:function (Elem, type, handler, data) {
var Handleobjin, Handleobj;
The confirmation function has a unique ID
if (!handler.guid) {
Handler.guid = jquery.guid++;
}
Gets the cached data object that this element corresponds to
var elemdata = Jquery.data (elem);
Gets the event object on the cached object that corresponds to the element and the handlers that are shared by all events
var events = Elemdata.events = Elemdata.events | | {};
var eventhandle = Elemdata.handle;
Is there an event handler function handle only one, all using JQuery.event.handle
By using closures, this function refers to the current event object, the argument.
if (!eventhandle) {
Elemdata.handle = Eventhandle = function () {
Return jQuery.event.handle.apply (Eventhandle.elem, arguments);
};
}
Allows the closure handler to locate 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, array form
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 handler 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 on a stack, and jQuery.event.handle here to find the actual handler
Handlers.push (Handleobj);
Nullify elem to prevent memory leaks in IE
Elem = null;
},
Global: {},
The real event handler function,
Because it is invoked via return jQuery.event.handle.apply (Eventhandle.elem, arguments)
So, this is the event source object, event
Handle:function (Event) {//1904
var all, handlers, namespaces, namespace, events;
event = window.event;
Event.currenttarget = this;
Find the event handling 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];
Parameters saved when registering an 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;
Invoke JQuery.event.add Add 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;
}
Registration method for the Click event
JQuery.fn.click = function (fn) {
This.bind ("click", FN);
return this;
}
This allows you to register a click event handler with the following code for an element with the ID msg on the page.
Copy Code code as follows:
Event actions
$ ("#msg"). Click (
function () {
alert (this.innerhtml);
}
);
