Read jQuery Part 8: Packaging Event Object_jquery

For example, to stop event bubbling, IE uses cancelBubble and standard browsers use stopPropagation.
To get the event source object, IE uses srcElement, standard browsers use target and so on.
jQuery mainly uses the jQuery.Event class and jQuery.event.fix method to repair and wrap native event objects.

Copy code 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.isDefaultPrevented = (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.isDefaultPrevented = 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();
},
isDefaultPrevented: returnFalse,
isPropagationStopped: returnFalse,
isImmediatePropagationStopped: returnFalse
};

The jQuery.Event class mainly does the following work

1, the originalEvent attribute is expanded, which temporarily stores the native event object.
2, fixed timeStamp. This attribute is not supported by IE6/7/8, and the return value is different in other supported browsers.
3. To prevent the default behavior of DOM elements, preventDefault
4 is used. To stop event bubbling, stopPropagation
5 is implemented or expanded. Several methods of DOM3 events are implemented or expanded: stopImmediatePropagation, isDefaultPrevented , isPropagationStopped, isImmediatePropagationStopped

In addition, jQuery.Event’s way of writing classes is also unique. It creates objects using hidden new .
jQuery.event.fix method is as follows

Copy code 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.target ) {
// Fixes #1925 where srcElement might not be defined either
event.target = event.srcElement || document;
}
// check if target is a textnode (safari)
if ( event.target.nodeType === 3 ) {
event.target = event.target.parentNode;
}
// Add relatedTarget, if necessary
if ( !event.relatedTarget && event.fromElement ) {
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement,
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;
},

它主要做了以下工作
1，event = jQuery.Event( originalEvent ); 该句创建了一个jQuery.Event类的实例对象，该对象修复及扩充上面刚刚提到了。
2， 一个循环将原生事件对象的所有属性拷贝给 1 中的event对象。

复制代码 代码如下:

for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
}

3， 统一事件源对象为 target 。
4， 统一事件相关对象为 relativeTarget 。
5， 扩充了pageX , pageY ，这两个属性首次在Firefox中引入的。不支持该属性的浏览器使用clientX/Y计算得到。
6， 扩充了 which ，使用它获取键盘按键值(keyCode)。这个属性也是在Firefox引入的。
7， 修复了metaKey。
8， 扩充了which，使用它获取鼠标按键值
细心的人可能注意到了，jQuery获取键盘按键值和鼠标按键值都是采用which。它没有向其它属性一样去兼容W3C已有标准 （button ）。这一点我在 读jQuery之七 及 各浏览器中鼠标按键值的差异 做了详细分析。
最后，给zChain.js添加包装事件对象的相关代码。
zChain-0.7.1.js