jQuery源碼分析之jQuery.event.fix方法五問

問題1：如何調用jQuery.event.fix方法?

event = jQuery.event.fix( event );//回調函數觸發的時候會傳入一個JS的event對象

問題2：那些屬性是鍵盤事件和滑鼠事件共有的屬性?

props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" ")

問題3：鍵盤事件有那些特有的屬性?

keyHooks: {

props: "char charCode key keyCode".split(" "),

filter: function( event, original ) {//event為jQuery.Event對象

// Add which for key events

if ( event.which == null ) {

event.which = original.charCode != null ? original.charCode : original.keyCode;

//如果event的which是空，那麼默認用charCode，如果charCode不存在用keyCode!

}

return event;

}

}

問題4：滑鼠事件有那些專有屬性?

mouseHooks: {

props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),

filter: function( event, original ) {

var body, eventDoc, doc,

button = original.button,//表示點擊的事件

fromElement = original.fromElement;//表示fromElement

// Calculate pageX/Y if missing and clientX/Y available

if ( event.pageX == null && original.clientX != null ) {

eventDoc = event.target.ownerDocument || document;

doc = eventDoc.documentElement;//這是HTML元素

body = eventDoc.body;//body元素

event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );

event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );

}

// Add relatedTarget, if necessary

if ( !event.relatedTarget && fromElement ) {

event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;

}//IE使用了event.fromElement!

// Add which for click: 1 === left; 2 === middle; 3 === right

// Note: button is not normalized, so don"t use it

if ( !event.which && button !== undefined ) {//不建議使用button屬性

event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );

}

return event;

}

}

問題5：如何獲取元素在頁面中的位置，也就是pageX,pageY等屬性?

event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );

event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );

我們必須知道jQuery在獲取pageX，pageY的時候減去了body或者documentElement元素的clientLeft和clientTop!

問題6：怎麼知道用戶按住了那一個電腦按鍵?

if ( event.which == null ) {

event.which = original.charCode != null ? original.charCode : original.keyCode;

//如果event的which是空，那麼默認用charCode，如果charCode不存在用keyCode!

}

默認獲取charCode，如果charCode不存在才獲取keyCode，如果需要把按鍵轉化為字元，用

String.fromCharCode(e.which)//e.which是滑鼠和鍵盤公用的事件屬性!

jQuery.event.fix源碼

fix: function( event ) {

//如果是通過jQuery.Event構造函數來完成的，那麼event對象是有倉庫的!

if ( event[ jQuery.expando ] ) {

return event;

}

// Create a writable copy of the event object and normalize some properties

var i, prop, copy,

type = event.type,//獲取JS對象的事件類型

originalEvent = event,//originalEvent保存JS的事件對象

fixHook = this.fixHooks[ type ];

//如果該類型的fixHook不存在，那麼我們自己設置fixHook，如果是滑鼠事件設置為mouseHooks

//如果是鍵盤事件設置為keyHooks！

//rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/,

//rkeyEvent = /^key/

if ( !fixHook ) {

this.fixHooks[ type ] = fixHook =

rmouseEvent.test( type ) ? this.mouseHooks :

rkeyEvent.test( type ) ? this.keyHooks :

{};

}

//props是所有的事件對象都具有的屬性，如果是滑鼠事件那麼把滑鼠事件和他合併，否則就是鍵盤事件屬性合併!

copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;

//創建jQuery.Event對象

event = new jQuery.Event( originalEvent );

i = copy.length;

//為jQuery.Event對象賦值

while ( i-- ) {

prop = copy[ i ];

event[ prop ] = originalEvent[ prop ];

}

// Support: IE<9

// Fix target property (#1925)

//設置target屬性

if ( !event.target ) {

event.target = originalEvent.srcElement || document;

}

// Support: Chrome 23+, Safari?

// Target should not be a text node (#504, #13143)

//如果target是文本節點，那麼獲取文本節點的父元素!

if ( event.target.nodeType === 3 ) {

event.target = event.target.parentNode;

}

// Support: IE<9

// For mouse/key events, metaKey==false if it"s undefined (#3368, #11328)

event.metaKey = !!event.metaKey;

//用keyHooks或者mouseHooks來過濾event對象!

return fixHook.filter ? fixHook.filter( event, originalEvent ) : event;

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！