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 子元素选择器。

1. 先推断selector的范例，假如是noData或文本/解释节点则返回，不增加事宜监听。
2. 假如handler.hanler存在，申明是个对象，将handleObjIn指向handler，并掏出handler/selector参数。
3. 假如selector存在，则依据selector从document.documentElement查找子元素。
4. handler无guid属性时为其增加。elemData.events不存在时初始化为空对象，并将event指向elemData.events。elemData.handle不存在时为其增加，定义为匿名函数，内部实行dispatch。
5. types多是由空格分离隔的多个事宜，用正则婚配返回一个数组。遍历该数组，正则婚配掏出能够存在的定名空间。肯定事宜的范例，拓展handleObj。
6. 假如事宜行列不存在时先初始化为空数组。假如special.add存在，申明是特别事宜，挪用special.add。托付事宜保留在行列的前面，其他事宜在行列末端。假如selector存在，申明是托付事宜，挪用splice在末了一个托付事宜后插进去，不然直接push即可。
7. 末了在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。

1. 先推断是不是存在事宜，不存在时直接返回。
2. 用正则婚配types，猎取要移除的事宜范例type和定名空间，保留统一数组里，示意婚配效果。
3. while轮回遍历数组，假如type空，移除一切范例的监听。
4. 推断是不是特别范例事宜，猎取事宜处置惩罚回调行列。遍历回调行列，推断当前与所传参数的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，为浏览器触发的原生事宜。

1. 在该要领内，依据nativeEvent复制一个新的事宜对象，接着掏出事宜处置惩罚回调行列handlers和纪录事宜特别范例的对象special(假如非特别范例是空对象)。
2. 将传入dispatch的参数数组复制到数组args中，事宜对象arguments[0]替换成上面复制的事宜对象。
3. 托付对象默许是当前元素，假如存在钩子函数preDispatch则实行且该函数返回非false，dispatch才继承实行。
4. 挪用jQuery.event.handler要领猎取事宜行列handlerQueue。遍历handlerQueue并实行，假如某个事宜回调返回false，则事宜住手冒泡、作废默许行动。
5. 假如存在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事宜等。