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事件等。
