摘要：回調(diào)隊(duì)列中的元素是對(duì)象，代表一個(gè)事件回調(diào)，擁有多個(gè)屬性，如等等，其中是回調(diào)函數(shù)，在觸發(fā)時(shí)通過傳遞，具體的在后面講。類型是時(shí)鍵表示事件名，規(guī)則同上，鍵值表示事件觸發(fā)時(shí)的回調(diào)函數(shù)。

jQuery的事件機(jī)制為異步回調(diào)，事件監(jiān)聽的屬性、參數(shù)和回調(diào)的等保存在Data實(shí)例中，在元素上保存該對(duì)象的引用。有方法handle，內(nèi)部執(zhí)行dispatch；有屬性events，其值是鍵值對(duì)為事件名和回調(diào)隊(duì)列的對(duì)象。回調(diào)隊(duì)列是一個(gè)對(duì)象數(shù)組，委托事件排在數(shù)組前，其余在后，回調(diào)在數(shù)組中的順序?yàn)檎{(diào)用on添加的順序。回調(diào)隊(duì)列中的元素是對(duì)象，代表一個(gè)事件回調(diào)，擁有多個(gè)屬性，如type/origType/data/handler/guid/selector等等，其中handler是回調(diào)函數(shù)，data在觸發(fā)時(shí)通過event.data傳遞，具體的在后面講。觸發(fā)事件時(shí)，根據(jù)類型從events中取出隊(duì)列并執(zhí)行。移除事件監(jiān)聽時(shí)，根據(jù)類型獲取回調(diào)隊(duì)列，從隊(duì)列中移除對(duì)應(yīng)函數(shù)。

.on/.one內(nèi)部都調(diào)用了函數(shù)on，為元素添加事件監(jiān)聽。而在函數(shù)on內(nèi)部，首先先對(duì)參數(shù)類型和數(shù)目加以區(qū)分，最后再遍歷調(diào)用on/one的jq對(duì)象，調(diào)用jQuery.event.add為每個(gè)元素添加事件監(jiān)聽。

on接收多個(gè)參數(shù)，根據(jù)參數(shù)的類型和個(gè)數(shù)對(duì)on/one的調(diào)用方式進(jìn)行區(qū)分。

參數(shù)一elem是添加事件監(jiān)聽的元素。調(diào)用.on/.one，this作為第一個(gè)參數(shù)傳入on(即elem)。

參數(shù)二types表示添加監(jiān)聽的事件，類型是string時(shí)，表示監(jiān)聽的事件，可以是多帶帶一個(gè)事件，也可以是用空格分隔開的多個(gè)事件的字符串，同時(shí)還有可選的命名空間。類型是object時(shí)鍵表示事件名，規(guī)則同上，鍵值表示事件觸發(fā)時(shí)的回調(diào)函數(shù)。

參數(shù)三selector是選擇器，過濾觸發(fā)事件的子元素，常用于事件委托中。

參數(shù)四data是觸發(fā)時(shí)的可選數(shù)據(jù)，通過event.data傳遞。

參數(shù)五fn是觸發(fā)事件時(shí)執(zhí)行的回調(diào)。

參數(shù)六one表示是否只觸發(fā)一次。

使用$().on時(shí)，可以傳入一個(gè)字符串和函數(shù)，表示監(jiān)聽事件及其回調(diào)，也可以傳入一個(gè)對(duì)象，鍵表示監(jiān)聽事件，值表示對(duì)應(yīng)事件的回調(diào)。on內(nèi)部先對(duì)這兩種調(diào)用進(jìn)行區(qū)分，如果selector不是字符，串且data非空，說明selector傳參錯(cuò)誤，置undefined，調(diào)用如.on(typeObj,undefined, data)；如果data空，說明調(diào)用如.on(typeObj, data)。接著便遍歷types對(duì)象，取出事件名及其回調(diào)，遞歸調(diào)用內(nèi)部函數(shù)on。

接著處理types是字符串的情況。如果data == null && fn == null成立，說明on只收到三個(gè)參數(shù)，為.on(type,fn)的調(diào)用。如果data非空但fn空，說明on收到四個(gè)參數(shù)，先判斷selector的類型，如果是字符串，說明是委托調(diào)用，即.on(type,selector,fn)；如果是其他類型，說明第四個(gè)參數(shù)是data，即.on(type,data,fn)。

然后處理fn和one參數(shù)，如果one === 1，即.one()調(diào)用，定義一個(gè)新的函數(shù)，內(nèi)部執(zhí)行off解綁事件并調(diào)用apply執(zhí)行函數(shù)，回調(diào)函數(shù)為這個(gè)新的函數(shù)。

在函數(shù)的末尾遍歷elem，為jq對(duì)象中的每個(gè)元素調(diào)用jQuery.event.add綁定事件。

function on( elem, types, selector, data, fn, one ) {
    var origFn, type;

    // Types can be a map of types/handlers
    // 用object key為監(jiān)聽事件類型 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只有三個(gè)參數(shù) elem types和fn
    if ( data == null && fn == null ) {

        // ( types, fn )
        fn = selector;
        data = selector = undefined;
    } else if ( fn == null ) {
        // on有四個(gè)參數(shù) 
        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 );
    } );
}

接受三個(gè)參數(shù)，在方法內(nèi)對(duì)調(diào)用情況進(jìn)行區(qū)分，最終遍歷調(diào)用off的jQuery對(duì)象，為每個(gè)元素調(diào)用off取消事件監(jiān)聽。

第一個(gè)參數(shù)types與on接受的第一個(gè)參數(shù)types相同，可以是字符串，也可以是對(duì)象。同時(shí)還有可選的參數(shù)selector，表示委托的對(duì)象，可選參數(shù)fn表示事件處理回調(diào)。

如果types有preventDefault/handleObj屬性，說明是個(gè)Event對(duì)象，從這個(gè)事件對(duì)象中取出元素、類型和事件回調(diào)，實(shí)例化jQuery對(duì)象，遞歸調(diào)用off移除事件。

然后判斷types類型，如果是對(duì)象則遍歷每一個(gè)屬性名，遞歸調(diào)用off。

接著判斷selector類型，如果是false或function類型，說明不是委托；false表示顯示指定非委托，function類型表示調(diào)用如off(types,fn)，更新fn和selector的值，將seletor賦予fn后，再將undefined賦予selector。經(jīng)過賦值操作后，fn如果是false則將其指向內(nèi)部函數(shù)returnFalse。

最后遍歷調(diào)用off的jQuery對(duì)象，調(diào)用jQuery.event.remove移除監(jiān)聽。

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事件，并不對(duì)外開放，只供內(nèi)部調(diào)用。

global是一個(gè)用于記錄用過的事件的對(duì)象，鍵是事件名稱，值是true，只有使用過才會(huì)記錄，只有jQuery.event.add會(huì)更新global。

add用于添加事件監(jiān)聽，在$.on()/one()內(nèi)調(diào)用，是一個(gè)接收5個(gè)參數(shù)的方法，其說明如下：

elem是添加事件監(jiān)聽的元素

types是監(jiān)聽的事件類型，可以是多帶帶一個(gè)事件，也可以是用空格分隔開的多個(gè)事件的字符串，同時(shí)還有可選的命名空間。

handler是事件處理回調(diào)

data是觸發(fā)事件時(shí)傳遞的參數(shù)，保存在event.data里

selector 子元素選擇器。

先判斷selector的類型，如果是noData或文本/注釋節(jié)點(diǎn)則返回，不添加事件監(jiān)聽。

如果handler.hanler存在，說明是個(gè)對(duì)象，將handleObjIn指向handler，并取出handler/selector參數(shù)。

如果selector存在，則根據(jù)selector從document.documentElement查找子元素。

handler無guid屬性時(shí)為其添加。elemData.events不存在時(shí)初始化為空對(duì)象，并將event指向elemData.events。elemData.handle不存在時(shí)為其添加，定義為匿名函數(shù)，內(nèi)部執(zhí)行dispatch。

types可能是由空格分隔開的多個(gè)事件，用正則匹配返回一個(gè)數(shù)組。遍歷該數(shù)組，正則匹配取出可能存在的命名空間。確定事件的類型，拓展handleObj。

如果事件隊(duì)列不存在時(shí)先初始化為空數(shù)組。如果special.add存在，說明是特殊事件，調(diào)用special.add。委托事件保存在隊(duì)列的前面，其他事件在隊(duì)列末尾。如果selector存在，說明是委托事件，調(diào)用splice在最后一個(gè)委托事件后插入，否則直接push即可。

最后在global中記錄已添加的事件回調(diào)類型。

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是一個(gè)obj 鍵handler對(duì)應(yīng)真正的handler 鍵selector對(duì)應(yīng)參數(shù)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
        // 為每個(gè)handler添加一個(gè)guid
        if ( !handler.guid ) {
            handler.guid = jQuery.guid++;
        }

        // Init the element"s event structure and main handler, if this is the first
        // elemData.events不存在時(shí)初始化為空對(duì)象
        if ( !( events = elemData.events ) ) {
            events = elemData.events = {};
        }
        // elemData.handle不存在時(shí)
        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為用空格隔開的多個(gè)事件 將用多個(gè)空格隔開的事件保存在一個(gè)數(shù)組里
        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隊(duì)列
            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;
        }

    }

    // ...
}

用于刪除綁定在元素上的事件，$().off內(nèi)部就調(diào)用了這個(gè)方法。這個(gè)方法接受5個(gè)參數(shù)。

elem是要移除事件監(jiān)聽的元素

types是要移除監(jiān)聽的事件類型，可以是多帶帶一個(gè)事件，也可以是用空格分隔開的多個(gè)事件的字符串，同時(shí)還有可選的命名空間。

handler是事件處理回調(diào)。

selector是子元素選擇器，委托時(shí)才傳值。

mappedTypes表示要移除的類型和事件隊(duì)列里的類型是否相同，默認(rèn)undefined，只有移除所有事件時(shí)才傳true。

先判斷是否存在事件，不存在時(shí)直接返回。

用正則匹配types，獲取要移除的事件類型type和命名空間，保存同一數(shù)組里，表示匹配結(jié)果。

while循環(huán)遍歷數(shù)組，如果type空，移除所有類型的監(jiān)聽。

判斷是否特殊類型事件，獲取事件處理回調(diào)隊(duì)列。遍歷回調(diào)隊(duì)列，判斷當(dāng)前與所傳參數(shù)的origType、guid等是否相同，來決定是否從回調(diào)隊(duì)列中刪除當(dāng)前元素；如果selector非空，說明是委托事件，委托數(shù)目減一；如果special.remove存在，說明非空對(duì)象，是特殊事件，移除特殊事件監(jiān)聽。

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 );

        // 對(duì)象上沒有events對(duì)象 說明沒綁定過事件 直接返回
        if ( !elemData || !( events = elemData.events ) ) {
            return;
        }

        // Once for each type.namespace in types; type may be omitted
        // types為用空格隔開的多個(gè)事件 將用多個(gè)空格隔開的事件保存在一個(gè)數(shù)組里
        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,數(shù)組
            tmp = tmp[ 2 ] &&
                new RegExp( "(^|.)" + namespaces.join( ".(?:.*.|)" ) + "(.|$)" );

            // Remove matching events
            origCount = j = handlers.length;
            while ( j-- ) {
                handleObj = handlers[ j ];

                // 判斷一下屬性 相同時(shí)修改從handlers數(shù)組中刪除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" );
        }
    }

    // ...
}

用于觸發(fā)事件，在on添加的回調(diào)中執(zhí)行，接受的參數(shù)可以有多個(gè)，但顯式指定的只有nativeEvent，為瀏覽器觸發(fā)的原生事件。

在該方法內(nèi)，根據(jù)nativeEvent復(fù)制一個(gè)新的事件對(duì)象，接著取出事件處理回調(diào)隊(duì)列handlers和記錄事件特殊類型的對(duì)象special(如果非特殊類型是空對(duì)象)。

將傳入dispatch的參數(shù)數(shù)組復(fù)制到數(shù)組args中，事件對(duì)象arguments[0]替換成上面復(fù)制的事件對(duì)象。

委托對(duì)象默認(rèn)是當(dāng)前元素，如果存在鉤子函數(shù)preDispatch則執(zhí)行且該函數(shù)返回非false，dispatch才能繼續(xù)執(zhí)行。

調(diào)用jQuery.event.handler方法獲取事件隊(duì)列handlerQueue。遍歷handlerQueue并執(zhí)行，如果某個(gè)事件回調(diào)返回false，則事件停止冒泡、取消默認(rèn)行為。

如果存在postDispatch則執(zhí)行。最后返回回調(diào)執(zhí)行返回的結(jié)果。

jQuery.event = {
    // ...

    dispatch: function( nativeEvent ) {

        // Make a writable jQuery.Event from the native event object
        // 原生event
        var event = jQuery.event.fix( nativeEvent );

        // 從緩存的events對(duì)象里取出觸發(fā)事件的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 ];
        }

        // 記錄觸發(fā)事件的委托對(duì)象
        event.delegateTarget = this;

        // Call the preDispatch hook for the mapped type, and let it bail if desired
        // 執(zhí)行鉤子函數(shù)
        if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
            return;
        }

        // Determine handlers
        // 獲取handler隊(duì)列
        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等方法和屬性，用于獲取事件隊(duì)列、為jQuery.Event原型添加屬性、復(fù)制event對(duì)象和記錄special事件等。