jquery事件綁定解綁機制源碼分析

為什麼Jquery能實現不傳回調函數也能解綁事件？如下：

$("p").on("click",function(){
   alert("The paragraph was clicked.");
});

$("#box1").off("click");

事件綁定解綁機制

調用on函數的時候，將生成一份事件數據，結構如下：

{
    type: type,
    origType: origType,
    data: data,
    handler: handler,
    guid: guid,
    selector: selector,
    needsContext: needsContext,
    namespace: namespace
}

並將該數據加入到元素的緩存中。jquery中每個元素都可以有一個緩存（隻有有需要的時候才生成），其實就是該元素的一個屬性。jquery為每個元素的每種事件都建立一個隊列，用來保存事件處理函數，所以可以對一個元素添加多個事件處理函數。緩存的結構如下：

"p#box":{  //元素
    "Jquery623873":{ //元素的緩存
        "events":{ 
            "click":[
              {    //元素click事件的事件數據
                          type: type,
                          origType: origType,
                          data: data,
                          handler: handler,
                          guid: guid,
                          selector: selector,
                          needsContext: needsContext,
                          namespace: namespace
                             }
            ],
            "mousemove":[
              {
                          type: type,
                          origType: origType,
                          data: data,
                          handler: handler,
                          guid: guid,
                          selector: selector,
                          needsContext: needsContext,
                          namespace: namespace
                             }
            ]
        }
    }
}

當要解綁事件的時候，如果沒指定fn參數，jquery就會從該元素的緩存裡拿到要解綁的事件的處理函數隊列，從裡面拿出fn參數,然後調用removeEventListener進行解綁。

源代碼

代碼註釋可能不太清楚，可以復制出來看

jquery原型中的on,one,off方法：

事件綁定從這裡開始

jQuery.fn.extend( {

    on: function( types, selector, data, fn ) {
        return on( this, types, selector, data, fn );
    },
    one: function( types, selector, data, fn ) {
        return on( this, types, selector, data, fn, 1 );
    },
    off: function( types, selector, fn ) {

        //此處省略處理參數的代碼

        return this.each( function() {
            jQuery.event.remove( this, types, fn, selector );
        } );
    }
} );

獨立出來供one和on調用的on函數：

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

    //此處省略處理參數的代碼

    //是否是通過one綁定，是的話使用一個函數代理當前事件回調函數，代理函數隻執行一次
    //這裡使用到瞭代理模式
    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++ );
    }

    /************************************************
    *** jquery將所有選擇到的元素到放到一個數組裡，然後
    *** 對每個元素到使用event對象的add方法綁定事件
    *************************************************/
    return elem.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    } );
}

處理參數的代碼也可以看一下，實現on("click",function(){})這樣調用 on:function(types, selector, data, fn)也不會出錯。其實就是內部判斷，如果data, fn參數為空的時候，把selector賦給fn

event對象是事件綁定的一個關鍵對象：

這裡處理把事件綁定到元素和把事件信息添加到元素緩存的工作：

jQuery.event = {

    add: function( elem, types, handler, data, selector ) {

        var handleObjIn, eventHandle, tmp,
            events, t, handleObj,
            special, handlers, type, namespaces, origType,
            elemData = dataPriv.get( elem );   //這句將檢查elem是否被緩存，如果沒有將會創建一個緩存添加到elem元素上。形式諸如：elem["jQuery310057655476080253721"] = {}


        // Don't attach events to noData or text/comment nodes (but allow plain objects)
        if ( !elemData ) {
            return;
        }


        //用戶可以傳入一個自定義數據對象來代替事件回調函數，將事件回調函數放在這個數據對象的handler屬性裡
        if ( handler.handler ) {
            handleObjIn = handler;
            handler = handleObjIn.handler;
            selector = handleObjIn.selector;
        }

        //每個事件回調函數都會生成一個唯一的id，以後find/remove的時候會用到

        if ( !handler.guid ) {
            handler.guid = jQuery.guid++;
        }

        // 如果元素第一次綁定事件，則初始化元素的事件數據結構和主回調函數（main）
        //說明：每個元素有一個主回調函數，作為綁定多個事件到該元素時的回調的入口
        if ( !( events = elemData.events ) ) {
            events = elemData.events = {};
        }
        //這裡就是初始化主回調函數的代碼
        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;
            };
        }

        // 處理事件綁定，考慮到可能會通過空格分隔傳入多個事件，這裡要進行多事件處理
        types = ( types || "" ).match( rnotwhite ) || [ "" ];
        t = types.length;
        while ( t-- ) {
            tmp = rtypenamespace.exec( types[ t ] ) || [];  
            type = origType = tmp[ 1 ];
            namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort();

            // There *must* be a type, no attaching namespace-only handlers
            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
            type = ( selector ? special.delegateType : special.bindType ) || type;

            // Update special based on newly reset type
            special = jQuery.event.special[ type ] || {};

            // 事件回調函數的數據對象
            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 );

            // 加入第一次綁定該類事件，會初始化一個數組作為事件回調函數隊列，每個元素的每一種事件有一個隊列
            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 );
                    }
                }
            }

            if ( special.add ) {
                special.add.call( elem, handleObj );

                if ( !handleObj.handler.guid ) {
                    handleObj.handler.guid = handler.guid;
                }
            }

            // 加入到事件回調函數隊列
            if ( selector ) {
                handlers.splice( handlers.delegateCount++, 0, handleObj );
            } else {
                handlers.push( handleObj );
            }

            // Keep track of which events have ever been used, for event optimization
            // 用來追蹤哪些事件從未被使用，用以優化
            jQuery.event.global[ type ] = true;
        }

    }
};

千萬註意，對象和數組傳的是引用！比如將事件數據保存到緩存的代碼：

handlers = events[ type ] = [];

if ( selector ) {
   handlers.splice( handlers.delegateCount++, 0, handleObj );
} else {
   handlers.push( handleObj );
}

handlers的改變，events[ type ]會同時改變。

dataPriv就是管理緩存的對象：

其工作就是給元素創建一個屬性，這個屬性是一個對象，然後把與這個元素相關的信息放到這個對象裡面，緩存起來。這樣需要使用到這個對象的信息時，隻要知道這個對象就可以拿到：

function Data() {
    this.expando = jQuery.expando + Data.uid++;
}

Data.uid = 1;

//刪除部分沒用到代碼
Data.prototype = {

    cache: function( owner ) {

        // 取出緩存，可見緩存就是目標對象的一個屬性
        var value = owner[ this.expando ];

        // 如果對象還沒有緩存，則創建一個
        if ( !value ) {
            value = {};

            // We can accept data for non-element nodes in modern browsers,
            // but we should not, see #8335.
            // Always return an empty object.
            if ( acceptData( owner ) ) {

                // If it is a node unlikely to be stringify-ed or looped over
                // use plain assignment
                if ( owner.nodeType ) {
                    owner[ this.expando ] = value;

                // Otherwise secure it in a non-enumerable property
                // configurable must be true to allow the property to be
                // deleted when data is removed
                } else {
                    Object.defineProperty( owner, this.expando, {
                        value: value,
                        configurable: true
                    } );
                }
            }
        }

        return value;
    },
    get: function( owner, key ) {
        return key === undefined ?
            this.cache( owner ) :

            // Always use camelCase key (gh-2257) 駝峰命名
            owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];
    },
    remove: function( owner, key ) {
        var i,
            cache = owner[ this.expando ];

        if ( cache === undefined ) {
            return;
        }

        if ( key !== undefined ) {

            // Support array or space separated string of keys
            if ( jQuery.isArray( key ) ) {

                // If key is an array of keys...
                // We always set camelCase keys, so remove that.
                key = key.map( jQuery.camelCase );
            } else {
                key = jQuery.camelCase( key );

                // If a key with the spaces exists, use it.
                // Otherwise, create an array by matching non-whitespace
                key = key in cache ?
                    [ key ] :
                    ( key.match( rnotwhite ) || [] );
            }

            i = key.length;

            while ( i-- ) {
                delete cache[ key[ i ] ];
            }
        }

        // Remove the expando if there's no more data
        if ( key === undefined || jQuery.isEmptyObject( cache ) ) {

            // Support: Chrome <=35 - 45
            // Webkit & Blink performance suffers when deleting properties
            // from DOM nodes, so set to undefined instead
            // https://bugs.chromium.org/p/chromium/issues/detail?id=378607 (bug restricted)
            if ( owner.nodeType ) {
                owner[ this.expando ] = undefined;
            } else {
                delete owner[ this.expando ];
            }
        }
    },
    hasData: function( owner ) {
        var cache = owner[ this.expando ];
        return cache !== undefined && !jQuery.isEmptyObject( cache );
    }
};