jQuery原始碼學習之event
jQuery的事件機制為非同步回撥，事件監聽的屬性、引數和回撥的等儲存在Data例項中，在元素上儲存該物件的引用。有方法handle，內部執行dispatch；有屬性events，其值是鍵值對為事件名和回撥佇列的物件。回撥佇列是一個物件陣列，委託事件排在陣列前，其餘在後，回撥在陣列中的順序為呼叫on新增的順序。回撥佇列中的元素是物件，代表一個事件回撥，擁有多個屬性，如type/origType/data/handler/guid/selector等等，其中handler是回撥函式，data在觸發時通過event.data傳遞，具體的在後面講。觸發事件時，根據型別從events中取出佇列並執行。移除事件監聽時，根據型別獲取回撥佇列，從佇列中移除對應函式。
設計思路
.on/.one內部都呼叫了函式on，為元素新增事件監聽。而在函式on內部，首先先對引數型別和數目加以區分，最後再遍歷呼叫on/one的jq物件，呼叫jQuery.event.add為每個元素新增事件監聽。
on
on接收多個引數，根據引數的型別和個數對on/one的呼叫方式進行區分。
- 引數一
elem是新增事件監聽的元素。呼叫.on/.one，this作為第一個引數傳入on(即elem)。 - 引數二
types表示新增監聽的事件，型別是string時，表示監聽的事件，可以是單獨一個事件，也可以是用空格分隔開的多個事件的字串，同時還有可選的名稱空間。型別是object時鍵表示事件名，規則同上，鍵值表示事件觸發時的回撥函式。 - 引數三
selector是選擇器，過濾觸發事件的子元素，常用於事件委託中。 - 引數四
data是觸發時的可選資料，通過event.data傳遞。 - 引數五
fn是觸發事件時執行的回撥。 - 引數六
one表示是否只觸發一次。
使用$().on時，可以傳入一個字串和函式，表示監聽事件及其回撥，也可以傳入一個物件，鍵表示監聽事件，值表示對應事件的回撥。on內部先對這兩種呼叫進行區分，如果selector不是字元，串且data非空，說明selector傳參錯誤，置undefined，呼叫如.on(typeObj,undefined, data)；如果data空，說明呼叫如.on(typeObj, data)。接著便遍歷types物件，取出事件名及其回撥，遞迴呼叫內部函式on。
接著處理types是字串的情況。如果data == null && fn == null成立，說明on只收到三個引數，為.on(type,fn)的呼叫。如果data非空但fn空，說明on收到四個引數，先判斷selector的型別，如果是字串，說明是委託呼叫，即.on(type,selector,fn)；如果是其他型別，說明第四個引數是data，即.on(type,data,fn)。
然後處理fn和one引數，如果one === 1，即.one()呼叫，定義一個新的函式，內部執行off解綁事件並呼叫apply執行函式，回撥函式為這個新的函式。
在函式的末尾遍歷elem，為jq物件中的每個元素呼叫jQuery.event.add繫結事件。
function on( elem, types, selector, data, fn, one ) {
var origFn, type;
// Types can be a map of types/handlers
// 用object key為監聽事件型別 value為handler
if ( typeof types === "object" ) {
// ( types-Object, selector, data )
// selector空，不是委託
if ( typeof selector !== "string" ) {
// ( types-Object, data )
data = data || selector;
selector = undefined;
}
for ( type in types ) {
on( elem, type, selector, data, types[ type ], one );
}
return elem;
}
// on只有三個引數 elem types和fn
if ( data == null && fn == null ) {
// ( types, fn )
fn = selector;
data = selector = undefined;
} else if ( fn == null ) {
// on有四個引數
if ( typeof selector === "string" ) { // elem types selector fn
// ( types, selector, fn )
fn = data;
data = undefined;
} else { // elem types selector fn
// ( types, data, fn )
fn = data;
data = selector;
selector = undefined;
}
}
if ( fn === false ) {
fn = returnFalse;
} else if ( !fn ) {
return elem;
}
if ( one === 1 ) {
origFn = fn;
fn = function( event ) {
// Can use an empty set, since event contains the info
jQuery().off( event );
return origFn.apply( this, arguments );
};
// Use same guid so caller can remove using origFn
fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
}
return elem.each( function() {
jQuery.event.add( this, types, fn, data, selector );
} );
}off
接受三個引數，在方法內對呼叫情況進行區分，最終遍歷呼叫off的jQuery物件，為每個元素呼叫off取消事件監聽。
第一個引數types與on接受的第一個引數types相同，可以是字串，也可以是物件。同時還有可選的引數selector，表示委託的物件，可選引數fn表示事件處理回撥。
如果types有preventDefault/handleObj屬性，說明是個Event物件，從這個事件物件中取出元素、型別和事件回撥，例項化jQuery物件，遞迴呼叫off移除事件。
然後判斷types型別，如果是物件則遍歷每一個屬性名，遞迴呼叫off。
接著判斷selector型別，如果是false或function型別，說明不是委託；false表示顯示指定非委託，function型別表示呼叫如off(types,fn)，更新fn和selector的值，將seletor賦予fn後，再將undefined賦予selector。經過賦值操作後，fn如果是false則將其指向內部函式returnFalse。
最後遍歷呼叫off的jQuery物件，呼叫jQuery.event.remove移除監聽。
jQuery.fn.extend({
off: function( types, selector, fn ) {
var handleObj, type;
if ( types && types.preventDefault && types.handleObj ) {
// ( event ) dispatched jQuery.Event
handleObj = types.handleObj;
jQuery( types.delegateTarget ).off(
handleObj.namespace ?
handleObj.origType + "." + handleObj.namespace :
handleObj.origType,
handleObj.selector,
handleObj.handler
);
return this;
}
if ( typeof types === "object" ) {
// ( types-object [, selector] )
for ( type in types ) {
this.off( type, selector, types[ type ] );
}
return this;
}
if ( selector === false || typeof selector === "function" ) {
// ( types [, fn] )
fn = selector;
selector = undefined;
}
if ( fn === false ) {
fn = returnFalse;
}
return this.each( function() {
jQuery.event.remove( this, types, fn, selector );
} );
}
})jQuery.event
jQuery.event上新增了眾多屬性和方法，用於管理jQuery事件，並不對外開放，只供內部呼叫。
global
global是一個用於記錄用過的事件的物件，鍵是事件名稱，值是true，只有使用過才會記錄，只有jQuery.event.add會更新global。
add
add用於新增事件監聽，在$.on()/one()內呼叫，是一個接收5個引數的方法，其說明如下：
-
elem是新增事件監聽的元素 -
types是監聽的事件型別，可以是單獨一個事件，也可以是用空格分隔開的多個事件的字串，同時還有可選的名稱空間。 -
handler是事件處理回撥 -
data是觸發事件時傳遞的引數，儲存在event.data裡 -
selector子元素選擇器。
- 先判斷
selector的型別，如果是noData或文字/註釋節點則返回，不新增事件監聽。 - 如果
handler.hanler存在，說明是個物件，將handleObjIn指向handler，並取出handler/selector引數。 - 如果
selector存在，則根據selector從document.documentElement查詢子元素。 -
handler無guid屬性時為其新增。elemData.events不存在時初始化為空物件，並將event指向elemData.events。elemData.handle不存在時為其新增，定義為匿名函式，內部執行dispatch。 -
types可能是由空格分隔開的多個事件，用正則匹配返回一個陣列。遍歷該陣列，正則匹配取出可能存在的名稱空間。確定事件的型別，擴充handleObj。 - 如果事件佇列不存在時先初始化為空陣列。如果
special.add存在，說明是特殊事件，呼叫special.add。委託事件儲存在佇列的前面，其他事件在佇列末尾。如果selector存在，說明是委託事件，呼叫splice在最後一個委託事件後插入，否則直接push即可。 - 最後在
global中記錄已新增的事件回撥型別。
jQuery.event = {
add: function( elem, types, handler, data, selector ) {
// handleObjIn儲存型別是object的handler的引用
var handleObjIn, eventHandle, tmp,
events, t, handleObj,
special, handlers, type, namespaces, origType,
elemData = dataPriv.get( elem );
// Don`t attach events to noData or text/comment nodes (but allow plain objects)
if ( !elemData ) {
return;
}
// Caller can pass in an object of custom data in lieu of the handler
// 傳入的handler是一個obj 鍵handler對應真正的handler 鍵selector對應引數selector
if ( handler.handler ) {
handleObjIn = handler;
handler = handleObjIn.handler;
selector = handleObjIn.selector;
}
// Ensure that invalid selectors throw exceptions at attach time
// Evaluate against documentElement in case elem is a non-element node (e.g., document)
if ( selector ) {
jQuery.find.matchesSelector( documentElement, selector );
}
// Make sure that the handler has a unique ID, used to find/remove it later
// 為每個handler新增一個guid
if ( !handler.guid ) {
handler.guid = jQuery.guid++;
}
// Init the element`s event structure and main handler, if this is the first
// elemData.events不存在時初始化為空物件
if ( !( events = elemData.events ) ) {
events = elemData.events = {};
}
// elemData.handle不存在時
if ( !( eventHandle = elemData.handle ) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
// Handle multiple events separated by a space
// types為用空格隔開的多個事件 將用多個空格隔開的事件儲存在一個陣列裡
types = ( types || "" ).match( rnothtmlwhite ) || [ "" ];
t = types.length;
while ( t-- ) {
// 類似 click.xxx 的情況 xxx是名稱空間
tmp = rtypenamespace.exec( types[ t ] ) || [];
type = origType = tmp[ 1 ];
namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort();
// There *must* be a type, no attaching namespace-only handlers
// types[t]為xxx. type空 處理types[t+1]
if ( !type ) {
continue;
}
// If event changes its type, use the special event handlers for the changed type
special = jQuery.event.special[ type ] || {};
// If selector defined, determine special event api type, otherwise given type
// 確定 special event的事件型別
type = ( selector ? special.delegateType : special.bindType ) || type;
// Update special based on newly reset type
special = jQuery.event.special[ type ] || {};
// handleObj is passed to all event handlers
handleObj = jQuery.extend( {
type: type,
origType: origType,
data: data,
handler: handler,
guid: handler.guid,
selector: selector,
needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
namespace: namespaces.join( "." )
}, handleObjIn );
// Init the event handler queue if we`re the first
// 第一次要初始化events佇列
if ( !( handlers = events[ type ] ) ) {
handlers = events[ type ] = [];
handlers.delegateCount = 0;
// Only use addEventListener if the special events handler returns false
if ( !special.setup ||
special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle );
}
}
}
// 新增到special中
if ( special.add ) {
special.add.call( elem, handleObj );
if ( !handleObj.handler.guid ) {
handleObj.handler.guid = handler.guid;
}
}
// Add to the element`s handler list, delegates in front
// delegateCount記錄委託事件的多少 委託事件在前面 其餘在後
if ( selector ) {
handlers.splice( handlers.delegateCount++, 0, handleObj );
} else {
handlers.push( handleObj );
}
// Keep track of which events have ever been used, for event optimization
// 記錄type型別event已被使用過
jQuery.event.global[ type ] = true;
}
}
// ...
}remove
用於刪除繫結在元素上的事件，$().off內部就呼叫了這個方法。這個方法接受5個引數。
-
elem是要移除事件監聽的元素 -
types是要移除監聽的事件型別，可以是單獨一個事件，也可以是用空格分隔開的多個事件的字串，同時還有可選的名稱空間。 -
handler是事件處理回撥。 -
selector是子元素選擇器，委託時才傳值。 -
mappedTypes表示要移除的型別和事件佇列裡的型別是否相同，預設undefined，只有移除所有事件時才傳true。
- 先判斷是否存在事件，不存在時直接返回。
- 用正則匹配
types，獲取要移除的事件型別type和名稱空間，儲存同一陣列裡，表示匹配結果。 -
while迴圈遍歷陣列，如果type空，移除所有型別的監聽。 - 判斷是否特殊型別事件，獲取事件處理回撥佇列。遍歷回撥佇列，判斷當前與所傳引數的
origType、guid等是否相同，來決定是否從回撥佇列中刪除當前元素；如果selector非空，說明是委託事件，委託數目減一；如果special.remove存在，說明非空物件，是特殊事件，移除特殊事件監聽。
jQuery.event = {
// ...
remove: function( elem, types, handler, selector, mappedTypes ) {
var j, origCount, tmp,
events, t, handleObj,
special, handlers, type, namespaces, origType,
elemData = dataPriv.hasData( elem ) && dataPriv.get( elem );
// 物件上沒有events物件 說明沒繫結過事件 直接返回
if ( !elemData || !( events = elemData.events ) ) {
return;
}
// Once for each type.namespace in types; type may be omitted
// types為用空格隔開的多個事件 將用多個空格隔開的事件儲存在一個陣列裡
types = ( types || "" ).match( rnothtmlwhite ) || [ "" ];
t = types.length;
while ( t-- ) {
tmp = rtypenamespace.exec( types[ t ] ) || [];
type = origType = tmp[ 1 ];
namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort();
// Unbind all events (on this namespace, if provided) for the element
// type undefined/空 解綁所有事件
if ( !type ) {
for ( type in events ) {
jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
}
continue;
}
special = jQuery.event.special[ type ] || {};
type = ( selector ? special.delegateType : special.bindType ) || type;
handlers = events[ type ] || []; // handlers為要remove的type的handlers,陣列
tmp = tmp[ 2 ] &&
new RegExp( "(^|\.)" + namespaces.join( "\.(?:.*\.|)" ) + "(\.|$)" );
// Remove matching events
origCount = j = handlers.length;
while ( j-- ) {
handleObj = handlers[ j ];
// 判斷一下屬性 相同時修改從handlers陣列中刪除handlers[j]
// 事件型別、guid、名稱空間、委託的選擇器等
if ( ( mappedTypes || origType === handleObj.origType ) &&
( !handler || handler.guid === handleObj.guid ) &&
( !tmp || tmp.test( handleObj.namespace ) ) &&
( !selector || selector === handleObj.selector ||
selector === "**" && handleObj.selector ) ) {
handlers.splice( j, 1 );
if ( handleObj.selector ) {
handlers.delegateCount--;
}
if ( special.remove ) {
special.remove.call( elem, handleObj );
}
}
}
// Remove generic event handler if we removed something and no more handlers exist
// (avoids potential for endless recursion during removal of special event handlers)
if ( origCount && !handlers.length ) {
if ( !special.teardown ||
special.teardown.call( elem, namespaces, elemData.handle ) === false ) {
jQuery.removeEvent( elem, type, elemData.handle );
}
delete events[ type ];
}
}
// Remove data and the expando if it`s no longer used
if ( jQuery.isEmptyObject( events ) ) {
dataPriv.remove( elem, "handle events" );
}
}
// ...
}
dispatch
用於觸發事件，在on新增的回撥中執行，接受的引數可以有多個，但顯式指定的只有nativeEvent，為瀏覽器觸發的原生事件。
- 在該方法內，根據
nativeEvent複製一個新的事件物件，接著取出事件處理回撥佇列handlers和記錄事件特殊型別的物件special(如果非特殊型別是空物件)。 - 將傳入
dispatch的引數陣列複製到陣列args中，事件物件arguments[0]替換成上面複製的事件物件。 - 委託物件預設是當前元素，如果存在鉤子函式
preDispatch則執行且該函式返回非false，dispatch才能繼續執行。 - 呼叫
jQuery.event.handler方法獲取事件佇列handlerQueue。遍歷handlerQueue並執行，如果某個事件回撥返回false，則事件停止冒泡、取消預設行為。 - 如果存在
postDispatch則執行。最後返回回撥執行返回的結果。
jQuery.event = {
// ...
dispatch: function( nativeEvent ) {
// Make a writable jQuery.Event from the native event object
// 原生event
var event = jQuery.event.fix( nativeEvent );
// 從快取的events物件裡取出觸發事件的handlers
var i, j, ret, matched, handleObj, handlerQueue,
args = new Array( arguments.length ),
handlers = ( dataPriv.get( this, "events" ) || {} )[ event.type ] || [],
special = jQuery.event.special[ event.type ] || {};
// Use the fix-ed jQuery.Event rather than the (read-only) native event
// 使用修飾過的event而不是原生event
args[ 0 ] = event;
for ( i = 1; i < arguments.length; i++ ) {
args[ i ] = arguments[ i ];
}
// 記錄觸發事件的委託物件
event.delegateTarget = this;
// Call the preDispatch hook for the mapped type, and let it bail if desired
// 執行鉤子函式
if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
return;
}
// Determine handlers
// 獲取handler佇列
handlerQueue = jQuery.event.handlers.call( this, event, handlers );
// Run delegates first; they may want to stop propagation beneath us
i = 0;
// 可冒泡
while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
event.currentTarget = matched.elem;
j = 0;
while ( ( handleObj = matched.handlers[ j++ ] ) &&
!event.isImmediatePropagationStopped() ) {
// Triggered event must either 1) have no namespace, or 2) have namespace(s)
// a subset or equal to those in the bound event (both can have no namespace).
if ( !event.rnamespace || event.rnamespace.test( handleObj.namespace ) ) {
event.handleObj = handleObj;
event.data = handleObj.data;
ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
handleObj.handler ).apply( matched.elem, args );
if ( ret !== undefined ) {
if ( ( event.result = ret ) === false ) {
event.preventDefault();
event.stopPropagation();
}
}
}
}
}
// Call the postDispatch hook for the mapped type
if ( special.postDispatch ) {
special.postDispatch.call( this, event );
}
return event.result;
}
// ...
}
後記
jQuery.event除了以上介紹的global/add/remove/event外，還有hanlders/addProp/fix/special等方法和屬性，用於獲取事件佇列、為jQuery.Event原型新增屬性、複製event物件和記錄special事件等。