讀jQuery之八 封裝事件對象

比如，停止事件冒泡IE用 cancelBubble ，標準瀏覽器則用 stopPropagation 。
擷取事件來源對象，IE用 srcElement ，標準瀏覽器則用 target 諸如此類。
jQuery 對原生事件對象的修複和封裝主要使用 jQuery.Event 類和 jQuery.event.fix 方法。
複製代碼 代碼如下:
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
};

jQuery.Event 類主要做了以下工作

1，擴充了 originalEvent 屬性，該屬性暫存了原生事件對象。
2，修複了 timeStamp ，該屬性IE6/7/8不支援，其它支援的各個瀏覽器中傳回值也不同。
3，阻止DOM元素預設行為統一採用 preventDefault
4，停止事件冒泡統一採用 stopPropagation
5，實現或擴充了 DOM3事件 的幾個方法：stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped

此外，jQuery.Event的 寫類方式 也較獨特。它 使用隱藏的new建立對象 。
jQuery.event.fix方法 如下
複製代碼 代碼如下:
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