解密jQuery事件核心 - 綁定設計（一）

說起jQuery的事件，不得不提一下Dean Edwards大神 addEvent庫，很多流行的類庫的基本思想從他那兒借來的

jQuery的事件處理機制吸取了JavaScript專家Dean Edwards編寫的事件處理函數的精華，使得jQuery處理事件綁定的時候相當的可靠。

在預留退路(graceful degradation)，循序漸進以及非入侵式編程思想方面，jQuery也做的非常不錯

事件的流程圖

總的來說對於JQuery的事件綁定

在綁定的時候做了包裝處理

在執行的時候有過濾器處理

 

---

.on( events [, selector ] [, data ], handler(eventObject) )

events：事件名

selector : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的后代元素

data :當一個事件被觸發時，要傳遞給事件處理函數的

handler:事件被觸發時，執行的函數

例如：

var body = $('body')
body.on('click','p',function(){
    console.log(this)
})

用on方法給body上綁定一個click事件，冒泡到p元素的時候才出發回調函數

這里大家需要明確一點：每次在body上點擊其實都會觸發事件，但是只目標為p元素的情況下才會觸發回調handler

通過源碼不難發現，on方法實質只完成一些參數調整的工作，而實際負責事件綁定的是其內部jQuery.event.add方法

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
            var origFn, type;

            // Types can be a map of types/handlers
            if ( typeof types === "object" ) {
                // ( types-Object, selector, data )
                if ( typeof selector !== "string" ) {
                    // ( types-Object, data )
                    data = data || selector;
                    selector = undefined;
                }
                for ( type in types ) {
                    this.on( type, selector, data, types[ type ], one );
                }
                return this;
            }

            if ( data == null && fn == null ) {
                // ( types, fn )
                fn = selector;
                data = selector = undefined;
            } else if ( fn == null ) {
                if ( typeof selector === "string" ) {
                    // ( types, selector, fn )
                    fn = data;
                    data = undefined;
                } else {
                    // ( types, data, fn )
                    fn = data;
                    data = selector;
                    selector = undefined;
                }
            }
            if ( fn === false ) {
                fn = returnFalse;
            } else if ( !fn ) {
                return this;
            }

            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 this.each( function() {
                jQuery.event.add( this, types, fn, data, selector );
            });

 

---

針對事件處理,我們可以拆分2部分：

一個事件預綁定期

一個事件執行期

本章着重講解事件的預綁定的時候做了那些處理，為什么要這樣處理？

事件底層的綁定接口無非就是用addEventListener處理的，所以我們直接定位到addEventListener下面

jQuery.event.add 中有

elem: 目標元素

type: 事件類型,如’click’

eventHandle: 事件句柄，也就是事件回調處理的內容了

false: 冒泡

 

現在我們把之前的案例給套一下看看

var body = document.getElementsByTagName('body')

var eventHandle = function(){
    console.log(this) 
}

body .addEventListener( ‘click’, eventHandle, false );

明顯有問題，每次在body上都觸發了回調，少了個p元素的處理,當然這樣的效果也無法處理

 

---

eventHandle源碼

回到內部綁定的事件句柄eventHandle ，可想而知eventHandle不僅僅只是只是充當一個回調函數的角色，而是一個實現了EventListener接口的對象

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 !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
            jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
            undefined;
    };
    // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
    eventHandle.elem = elem;
}

可見在eventHandle中並沒有直接處理回調函數，而是映射到jQuery.event.dispatch分派事件處理函數了

僅僅只是傳入eventHandle.elem，arguments , 就是body元素 與事件對象

那么這里有個問題，事件回調的句柄並沒有傳遞過去，后面的代碼如何關聯？

本章的一些地方可能要結合后面的dispatch處理才能理清，但是我們還是先看看做了那些處理

 

---

on內部的實現機制

我們開從頭來理清下jQuery.event.add代碼結構，適當的跳過這個環節中不能理解的代碼，具體遇到在提出

之前就提到過jQuery從1.2.3版本引入數據緩存系統，貫穿內部，為整個體系服務，事件體系也引入了這個緩存機制

所以jQuery並沒有將事件處理函數直接綁定到DOM元素上，而是通過$.data存儲在緩存$.cahce上

 

第一步：獲取數據緩存

//獲取數據緩存
    elemData = data_priv.get( elem );

在$.cahce緩存中獲取存儲的事件句柄對象，如果沒就新建elemData

 

第二步：創建編號

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

為每一個事件的句柄給一個標示，添加ID的目的是 用來尋找或者刪除handler，因為這個東東是緩存在緩存對象上的，沒有直接跟元素節點發生關聯

 

第三步：分解事件名與句柄

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 !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
            jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
            undefined;
    };
    eventHandle.elem = elem;
}

events，eventHandle 都是elemData緩存對象內部的，可見

在elemData中有兩個重要的屬性，

一個是events，是jQuery內部維護的事件列隊

一個是handle，是實際綁定到elem中的事件處理函數

之后的代碼無非就是對這2個對象的篩選，分組，填充了

 

第四步: 填充事件名與事件句柄

// Handle multiple events separated by a space
// jQuery(...).bind("mouseover mouseout", fn);
// 事件可能是通過空格鍵分隔的字符串，所以將其變成字符串數組
// core_rnotwhite:/\S+/g
types = ( types || "" ).match( core_rnotwhite ) || [""];
// 例如：'.a .b .c'.match(/\S+/g) → [".a", ".b", ".c"]
// 事件的個數
t = types.length;

while ( t-- ) {
    // 嘗試取出事件的命名空間
    // 如"mouseover.a.b" → ["mouseover.a.b", "mouseover", "a.b"]
    tmp = rtypenamespace.exec( types[t] ) || [];
    // 取出事件類型，如mouseover
    type = origType = tmp[1];
    // 取出事件命名空間，如a.b，並根據"."分隔成數組
    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
    // 根據是否已定義selector，決定使用哪個特殊事件api，如果沒有非特殊事件，則用type
    type = ( selector ? special.delegateType : special.bindType ) || type;

    // Update special based on newly reset type
    // type狀態發生改變，重新定義特殊事件
    special = jQuery.event.special[ type ] || {};

    // handleObj is passed to all event handlers
    // 這里把handleObj叫做事件處理對象,擴展一些來着handleObjIn的屬性
    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
    // 初始化事件處理列隊，如果是第一次使用，將執行語句
    if ( !(handlers = events[ type ]) ) {
        handlers = events[ type ] = [];
        handlers.delegateCount = 0;

        // Only use addEventListener if the special events handler returns false
        // 如果獲取特殊事件監聽方法失敗，則使用addEventListener進行添加事件
        if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
            if ( elem.addEventListener ) {
                elem.addEventListener( type, eventHandle, false );
            }
        }
    }

    // 特殊事件使用add處理
    if ( special.add ) {
        special.add.call( elem, handleObj );
        // 設置事件處理函數的ID
        if ( !handleObj.handler.guid ) {
            handleObj.handler.guid = handler.guid;
        }
    }

    // Add to the element's handler list, delegates in front
    // 將事件處理對象推入處理列表，姑且定義為事件處理對象包
    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;
}

// Nullify elem to prevent memory leaks in IE
// 設置為null避免IE中循環引用導致的內存泄露
elem = null;
},

這段比較長了分解下，最終的目的就是為填充events，eventHandle

 

涉及

 

多事件處理：

如果是多事件分組的情況jQuery(...).bind("mouseover mouseout", fn);

事件可能是通過空格鍵分隔的字符串，所以將其變成字符串數組

 

增加命名空間處理：

事件名稱可以添加指定的event namespaces（命名空間） 來簡化刪除或觸發事件。例如，"click.myPlugin.simple"為 click 事件同時定義了兩個命名空間 myPlugin 和 simple。通過上述方法綁定的 click 事件處理，可以用.off("click.myPlugin") 或 .off("click.simple")刪除綁定到相應元素的Click事件處理程序，而不會干擾其他綁定在該元素上的“click（點擊）” 事件。命名空間類似CSS類，因為它們是不分層次的;只需要有一個名字相匹配即可。以下划線開頭的名字空間是供 jQuery 使用的。

 

引入jQuery的Special Event機制

什么時候要用到自定義函數？有些瀏覽器並不兼容某類型的事件，如IE6～8不支持hashchange事件，你無法通過jQuery(window).bind('hashchange', callback)來綁定這個事件，這個時候你就可以通過jQuery自定義事件接口來模擬這個事件，做到跨瀏覽器兼容。

原理

jQuery(elem).bind(type, callbakc)實際上是映射到 jQuery.event.add(elem, types, handler, data)這個方法，每一個類型的事件會初始化一次事件處理器，而傳入的回調函數會以數組的方式緩存起來，當事件觸發的時候處理器將依次執行這個數組。
jQuery.event.add方法在第一次初始化處理器的時候會檢查是否為自定義事件，如果存在則將會把控制權限交給自定義事件的事件初始化函數，同樣事件卸載的jQuery.event.remove方法在刪除處理器前也會檢查此。

!special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false
jQuery.removeEvent( elem, type, elemData.handle );

 

jQuery.event.special對象中，保存着為適配特定事件所需的變量和方法，

具體有:
delegateType / bindType （用於事件類型的調整）
setup （在某一種事件第一次綁定時調用）
add （在事件綁定時調用）
remove （在解除事件綁定時調用）
teardown （在所有事件綁定都被解除時調用）
trigger （在內部trigger事件的時候調用）
noBubble
_default
handle （在實際觸發事件時調用）
preDispatch （在實際觸發事件前調用）
postDispatch （在實際觸發事件后調用）

在適配工作完成時，會產生一個handleObj對象，這個對象包含了所有在事件實際被觸發是所需的所有參數

 

采用自定義事件或者瀏覽器接口綁定事件

if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
                        if ( elem.addEventListener ) {
                            elem.addEventListener( type, eventHandle, false );
                        }
                    }

 

冒泡標記

  handlers.splice( handlers.delegateCount++, 0, handleObj );

 

最后記得

設置為null避免IE中循環引用導致的內存泄露

elem = null;

 

這個元素沒有直接讓事件直接引用了，而是掛在到，數據緩存句柄上，很好的避免了這個IE泄露的問題

eventHandle.elem = elem;

 

通過整個流程，我們的數據緩存對象就填充完畢了，看看截圖

 

events:handleObj 

 

handle

 

數據緩存對象

 

---

得出總結：

在jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : 方法中沒有傳遞回調對象

是因為回調的句柄被關聯到了elemData，也就是內部數據緩存中了

 

不難得出jQuery的事件綁定機制：

jQuery對每一個elem中的每一種事件，只會綁定一次事件處理函數（綁定這個elemData.handle）,

而這個elemData.handle實際只做一件事，就是把event丟到jQuery內部的事件分發程序

 

jQuery.event.dispatch.apply( eventHandle.elem, arguments );

而不同的事件綁定，具體是由jQuery內部維護的事件列隊來區分（就是那個elemData.events）

在elemData中獲取到events和handle之后，接下來就需要知道這次綁定的是什么事件了

 

畫了個簡單流程圖

 

本章只是事件的前段部分，解析完elemData數據，在執行期間又會如何處理，如何巧妙的運用這些設計，下章分曉！

 

如果覺得有幫助，請點擊下推薦，分享給更多有需要的人~