由點擊頁面其它地方隱藏div所想到的jQuery的delegate_jquery

先從最簡單的開始，假如頁面有一個id為test的div，我們要實現點擊頁面其它地方隱藏該div:

複製程式碼 程式碼如下:

       

對於這個問題一般有兩種思路，這兩種思路都會利用事件冒泡這一原理，想要詳細了解Javascript事件機制可以看看JavaScript與HTML交互——事件,這不是本文重點，所以這裡只是簡單介紹一下事件冒泡，

事件冒泡

IE的事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的元素

Netscape的事件擷取：較不具體的節點更早接收事件，而最具體的元素最後接收事件，和事件冒泡相反

DOM事件流：DOM2級事件規定事件流包括三個階段，事件捕獲階段，處於目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然後是實際目標接收事件，最後是冒泡句階段。

Opera、Firefox、Chrome、Safari都支援DOM事件流，IE不支援事件流，只支援事件冒泡

如有以下html，點選div區域，依照不同的模型事件元素的click事件觸發順序如下圖所示：

複製程式碼 代碼如下:

🎜>
   
   


   

        Click Here

在觸發DOM上的某個事件的時候會產生一個事件對象event，這個對象包含著所有與事件有關的信息，包括產生事件的元素、事件類型等相關信息。所有瀏覽都支援event對象，但支援方式不同。事件物件有一個方法（W3C：stopPropagation）/屬性（IE：cancelBulle=true）可以阻止事件繼續冒泡或捕捉。我們如果想在事件冒泡到某個元素時阻止冒泡可以寫一個這樣的兼容瀏覽器方法:

複製程式碼

程式碼如下:


function stopPropagation(e) {/把事件物件傳送入
            if (e.stopPropagation) //支援W3C標準
           else //IE8以下瀏覽器
                e.cancelBubble = true;
        }        }

因為所有的瀏覽器都支援事件冒泡，瀏覽器相容性考慮，我們一般綁定事件的時候都會利用事件冒泡而不是事件捕獲。了解了這個之後我們可以看看下面兩種思路了。

思路一

第一種思路分兩步驟

第一步：對document的click事件綁定事件處理程序，使其隱藏該div

第二步：對div的click事件綁定事件處理程序，阻止事件冒泡，防止其冒泡到document，而呼叫document的onclick方法隱藏了該div。

複製程式碼

程式碼如下:

這樣當點擊頁面非div區域的時候，直接或層層冒泡會呼叫document的onclick方法，隱藏該div，而點擊div或其子元素的時候，事件總是會冒泡的div本身，這時候會阻止事件繼續冒泡，不會呼叫doument的onclick方法致使div被隱藏，從而完成了我們的需求。

思路二

我們之前提到，在觸發DOM上的某個事件的時候會產生一個事件對象event，這個對象包含著所有與事件有關的信息，包括產生事件的元素、事件類型等相關信息，思路一中div的click事件處理程序傳入的參數就是這個event物件。存取IE中的event物件有幾種不同的方式，取決於指定事件處理程序的方法。直接為DOM元素新增事件處理程序時，event物件作為window物件的屬性存在。 event物件包含了一個重要屬性：target(W3C)/srcElement(IE)，這個屬性標識了觸發事件的原始元素，思路二就是要利用這個屬性。我們可以直接對document的click事件綁定事件處理程序，在事件處理程序中判讀事件來源是否為id==test的div元素或其子元素，如果是則方法return不做操作，如果不是則隱藏該div。

複製代碼

代碼如下:            $(document).bind('click',function(e){

                  var elem = e.target || e.srcElement ;

                while (elem) { //循環判斷至接節點，防止點選的是div子元素
     🎜>                        return;
                    }
                    }

                $('#test').css('display','none'); //點選的不是div或其子元素
  🎜>

這樣當點擊頁面任何地方的時候都會層層冒泡至document的click事件，事件處理程序會判斷事件來源是否為id==test的div或其子元素，如果是方法return，否則隱藏該div，也能夠實現我們的需求。

注意點及優劣

這兩個想法都依賴於事件冒泡，所以我們在處理其它相關元素的click事件的時候一定要注意這一點，避免其他相關元素的click事件處理程序中包含阻止事件冒泡程式碼而影響了該功能。

這兩種方式都很容易理解，貌似思路一更優秀一些，看起來它的處理更簡單一些，不用去層層判斷事件源，直接把click事件綁定在該div上。在這個例子中確實如此，但是有些複雜的頁面就不盡然了，假如我們有一個頁面，上面有數十個div都需要點擊頁面其它地方隱藏這類問題

複製碼 代碼如下:

           

1

           

           

1

           

           

1

           

複製代碼 代碼如下:

看起來簡單依舊的樣子，但是我們仔細想想就會發現問題，我們在每個dialog上都綁定了類似的方法，維護如此多的click事件處理程序對內存來說絕對是可開銷，導致我們頁面運作緩慢。而且如果我們可以動態使用ajax創建新dialog問題又來了，新創建的dialog不能實現隱藏功能！因為綁定函數已經執行完了，不會再為新的dialog綁定click事件處理程序，我們只能自己來做這件事。也就是說思路一無法把處理程序附加到可能還未存在於DOM中的DOM元素之上。因為它是直接把處理程序綁定到各個元素上，它不能把處理程序綁定到還未存在於頁面中的元素之上。

這時候就是思路二展示身手的時候了，我們看看思路二在這種時候代碼的書寫

複製代碼 代碼如下:

delegate先看看jQuery官方對delegate的語法及描述

.delegate( selector, eventType, handler(eventObject) )

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程序，並規定當這些事件發生時執行的函數。

使用 delegate() 方法的事件處理程序適用於目前或未來的元素（例如由腳本建立的新元素）。

複製程式碼

程式碼如下:$( "table" ).delegate( "td" , "click", function() {      $( this ).toggleClass( "chosen" );    });

    透過上面語句我們就可以為所有table的td綁定click事件處理程序。

delegate方法設計意圖在於把處理程序附加到單一元素上或是一小組元素之上，監聽後代元素上的事件而不是循環遍歷並把同一個函數逐個附加到DOM中的多個元素上。把處理程序附加到一個(或是一小組)祖先元素上而不是直接把處理程序附加到頁面中的所有元素上，從而帶來性能上的優化。

jQuery版隱藏dialog

透過上面知識我們可以發現jQuery的delegate方法可以方便實現我們隱藏div的需求

複製程式碼

程式碼如下:

透過上面我們說一堆我們可以在權衡使用bind還是delegate上有一定依據了，如果就單獨綁定一個元素的事件處理程序，用bind還是很合適的，但是如果處理許多類似元素的事件處理程序的時候不妨考慮一下delegate，看看是否對提高效能有所幫助。