Read jQuery's 8th packaging event object _ jquery

Source: Internet
Author: User
Due to the differences in original event objects in various browsers, most JS library frameworks fix and package native event objects more or less. For example, use cancelBubble to stop event bubbling IE, and use stopPropagation in standard browsers.
Get the event source object, IE uses srcElement, and standard browser uses target.
JQuery uses the jQuery. Event class and jQuery. event. fix Method to fix and encapsulate native Event objects.

The Code is as follows:


JQuery. Event = function (src ){
// Allow instantiation without the 'new' keyword
If (! This. preventDefault ){
Return new jQuery. Event (src );
}
// Event object
If (src & src. type ){
This. originalEvent = src;
This. type = src. type;
// Events bubbling up the document may have been marked as prevented
// By a handler lower down the tree; reflect the correct value.
This. isdefapreprevented = (src. defaultPrevented | src. returnValue = false |
Src. getPreventDefault & src. getPreventDefault ())? ReturnTrue: returnFalse;
// Event type
} Else {
This. type = src;
}
// TimeStamp is buggy for some events on Firefox (#3843)
// So we won't rely on the native value
This. timeStamp = jQuery. now ();
// Mark it as fixed
This [jQuery. expando] = true;
};
Function returnFalse (){
Return false;
}
Function returnTrue (){
Return true;
}
// JQuery. Event is based on DOM3 Events as specified by the ECMAScript Language Binding
// Http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
JQuery. Event. prototype = {
PreventDefault: function (){
This. isdefapreprevented = returnTrue;
Var e = this. originalEvent;
If (! E ){
Return;
}
// If preventDefault exists run it on the original event
If (e. preventDefault ){
E. preventDefault ();
// Otherwise set the returnValue property of the original event to false (IE)
} Else {
E. returnValue = false;
}
},
StopPropagation: function (){
This. isPropagationStopped = returnTrue;
Var e = this. originalEvent;
If (! E ){
Return;
}
// If stopPropagation exists run it on the original event
If (e. stopPropagation ){
E. stopPropagation ();
}
// Otherwise set the cancelBubble property of the original event to true (IE)
E. cancelBubble = true;
},
StopImmediatePropagation: function (){
This. isImmediatePropagationStopped = returnTrue;
This. stopPropagation ();
},
Isdefapreprevented: returnFalse,
IsPropagationStopped: returnFalse,
IsImmediatePropagationStopped: returnFalse
};


The jQuery. Event class mainly performs the following work:

1. extended the originalEvent attribute, which saves native event objects.
2. Fixed the timeStamp. This attribute is not supported by IE6/7/8, and the returned values in other supported browsers are also different.
3. Prevent DOM elements from using preventDefault by default.
4. stopPropagation is used to stop event bubbling.
5. Several Methods for implementing or expanding the DOM3 event: stopImmediatePropagation, isDefaultPrevented, isPropagationStopped, isImmediatePropagationStopped

In addition, the jQuery. Event write class method is also unique. It uses hidden new to create objects.
The jQuery. event. fix method is as follows:

The Code is as follows:


Fix: function (event ){
If (event [jQuery. expando]) {
Return event;
}
// Store a copy of the original event object
// And "clone" to set read-only properties
Var originalEvent = event;
Event = jQuery. Event (originalEvent );
For (var I = this. props. length, prop; I ;){
Prop = this. props [-- I];
Event [prop] = originalEvent [prop];
}
// Fix target property, if necessary
If (! Event.tar get ){
// Fixes #1925 where srcElement might not be defined either
Event.tar get = event. srcElement | document;
}
// Check if target is a textnode (safari)
If (event.tar get. nodeType = 3 ){
Event.tar get = event.tar get. parentNode;
}
// Add relatedTarget, if necessary
If (! Event. relatedTarget & event. fromElement ){
Event. relatedTarget = event. fromElement = event.tar get? Event. toElement: event. fromElement;
}
// Calculate pageX/Y if missing and clientX/Y available
If (event. pageX = null & event. clientX! = Null ){
Var doc = document.doc umentElement,
Body = document. body;
Event. pageX = event. clientX + (doc & doc. scrollLeft | body & body. scrollLeft | 0)-(doc & doc. clientLeft | body & body. clientLeft | 0 );
Event. pageY = event. clientY + (doc & doc. scrollTop | body & body. scrollTop | 0)-(doc & doc. clientTop | body & body. clientTop | 0 );
}
// Add which for key events
If (event. which = null & (event. charCode! = Null | event. keyCode! = Null )){
Event. which = event. charCode! = Null? Event. charCode: event. keyCode;
}
// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
If (! Event. metaKey & event. ctrlKey ){
Event. metaKey = event. ctrlKey;
}
// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
If (! Event. which & event. button! = Undefined ){
Event. which = (event. button & 1? 1: (event. button & 2? 3: (event. button & 4? 2: 0 )));
}
Return event;
},


It mainly does the following work:
1, event = jQuery. Event (originalEvent); this sentence creates a jQuery. Event class instance object, which is fixed and expanded as mentioned above.
2. A loop copies all attributes of the native event object to the event object in step 1.

The Code is as follows:


For (var I = this. props. length, prop; I ;){
Prop = this. props [-- I];
Event [prop] = originalEvent [prop];
}


3. The unified event source object is target.
4. The unified event-related object is relativeTarget.
5. Expanded pageX and pageY. These two attributes were first introduced in Firefox. The browser that does not support this attribute is computed using clientX/Y.
6. Expanded which and used it to obtain the keyCode ). This attribute is also introduced in Firefox.
7. Fixed metaKey.
8. Expanded which and used it to obtain the mouse key value.
Careful people may notice that jQuery uses which to obtain the keyboard key value and mouse key value. It is not compatible with W3C existing standards (buttons) like other attributes ). In this regard, I have analyzed in detail the differences between the mouse and key values in jQuery 7 and various browsers.
Finally, add code for packaging event objects to zChain. js.
ZChain-0.7.1.js
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.