在網頁開發的過程中經常遇到的一個需求就是點選一div內部做某些操作，而點選頁面其它地方隱藏該div。比如很多導航選單，當選單展開的時候，就會要求點選頁面其它非選單地方，隱藏該選單。
先從最簡單的開始，假如頁面有一個id為test的div，我們要實現點選頁面其它地方隱藏該div:
<div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div>
對於這個問題一般有兩種思路，這兩種思路都會利用事件冒泡這一原理，想要詳細瞭解Javascript事件機制可以看看JavaScript與HTML互動——事件,這不是本文重點，所以這裡只是簡單介紹一下事件冒泡，
事件冒泡
IE的事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的元素
Netscape的事件捕獲：不太具體的節點更早接收事件，而最具體的元素最後接收事件，和事件冒泡相反
DOM事件流：DOM2級事件規定事件流包括三個階段，事件捕獲階段，處於目標階段，事件冒泡階段，首先發生的是事件捕獲，為擷取事件提供機會，然後是實際目標接收事件，最後是冒泡句階段。
Opera、Firefox、Chrome、Safari都支援DOM事件流，IE不支援事件流，只支援事件冒泡
如有以下html，點選div區域，按照不同的模型事件元素的click事件觸發順序如下所示：
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Test Page</title> </head> <body> <div> Click Here</div> </body> </html>
在觸發DOM上的某個事件的時候會產生一個事件物件event，這個物件包含著所有與事件有關的資訊，包括產生事件的元素、事件型別等相關資訊。所有瀏覽都支援event物件，但支援方式不同。事件物件有一個方法（W3C：stopPropagation）/屬性（IE：cancelBulle=true）可以阻止事件繼續冒泡或捕獲。我們如果想在事件冒泡到某元素時阻止冒泡可以寫一個這樣的相容瀏覽器方法:
function stopPropagation(e) {//把事件物件傳入 if (e.stopPropagation) //支援W3C標準 e.stopPropagation(); else //IE8及以下瀏覽器 e.cancelBubble = true; }
因為所有的瀏覽器都支援事件冒泡，瀏覽器相容性考慮，我們一般繫結事件的的時候都會利用事件冒泡而不是事件捕獲。瞭解了這個之後我們可以看看下面兩種思路了。
思路一
第一種思路分兩步
第一步：對document的click事件繫結事件處理程式，使其隱藏該div
第二步：對div的click事件繫結事件處理程式，阻止事件冒泡，防止其冒泡到document，而呼叫document的onclick方法隱藏了該div。
<script type="text/javascript">
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
$(document).bind('click',function(){
$('#test').css('display','none');
});
$('#test').bind('click',function(e){
stopPropagation(e);
});
</script>
這樣當點選頁面非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。
<script type="text/javascript"> $(document).bind('click',function(e){ var e = e || window.event; //瀏覽器相容性 var elem = e.target || e.srcElement; while (elem) { //迴圈判斷至跟節點，防止點選的是div子元素 if (elem.id && elem.id=='test') { return; } elem = elem.parentNode; } $('#test').css('display','none'); //點選的不是div或其子元素 }); </script>
這樣當點選頁面任何地方的時候都會層層冒泡至document的click事件，事件處理程式會判斷事件源是否為id==test的div或其子元素，如果是方法return，否則隱藏該div，也能夠實現我們的需求。
注意點及優劣
這兩種思路都依賴於事件冒泡，所以我們在處理其它相關元素的click事件的時候一定要注意這點，避免其他相關元素的click事件處理程式中包含阻止事件冒泡程式碼而影響了該功能。
這兩種方式都很容易理解，貌似思路一更優秀一些，看起來它的處理更簡單一些，不用去層層判斷事件源，直接把click事件繫結在該div上。在這個例子中確實如此，但是有些複雜的頁面就不盡然了，假如我們有一個頁面，上面有數十個div都需要點選頁面其它地方隱藏這類問題
<div class="dialogs"> <div class="dialog"> <div id="1">1</div> <div id="2">2</div> </div> <div class="dialog"> <div id="1">1</div> <div id="2">2</div> </div> <div class="dialog"> <div id="1">1</div> <div id="2">2</div> </div> ... </div>
我們用思路一寫出的程式碼可能是這樣：
<script type="text/javascript">
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
$(document).bind('click',function(){
$('.dialog').css('display','none');
});
$('.dialog').bind('click',function(e){
stopPropagation(e);
});
</script>
看起來簡單依舊的樣子，但是我們仔細想想就會發現問題，我們在每個dialog上都繫結了類似的方法，維護如此多的click事件處理程式對記憶體來說絕對是可開銷，導致我們頁面執行緩慢。而且如果我們可以動態使用ajax建立新dialog問題又來了，新建立的dialog不能實現隱藏功能！因為繫結函式已經執行完了，不會再為新的dialog繫結click事件處理程式，我們只能自己來做此事。也就是說思路一無法把處理程式附加到可能還未存在於DOM中的DOM元素之上。因為它是直接把處理程式繫結到各個元素上，它不能把處理程式繫結到還未存在於頁面中的元素之上。
這時候就是思路二展示身手的時候了，我們看看思路二在這種時候程式碼的書寫
<script type="text/javascript"> $(document).bind('click',function(e){ var e = e || window.event; var elem = e.target || e.srcElement; while (elem) { if (elem.className && elem.className.indexOf('dialog')>-1) { return; } elem = elem.parentNode; } $('#test').css('display','none'); }); </script>
改動也相當的小，我們來看看是不是能解決上邊的兩個問題了，首先無論多少個dialog我們只是繫結了一個click事件處理程式，對效能影響不大，新增一個新的dialog思路二的程式碼還好不好使呢，依舊好使，這樣我們就能發現在複雜頁面的情況下實際上思路二是一種更優秀的解決方案。
這些都明白了，我們就能說說本文的第二個主角jQuery的delegate方法了。
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的需求
<script type="text/javascript"> $('.dialogs').delegate('.dialog','click',function(){ $(this).css('display','none'); }); </script>
使用jQuery我們發現比我們思路二在效能上又有了小幅提升，因為我們不需要冒泡至document處理了，只需要在dialog的父元素就可以處理完成了，可以不至於把很多類似功能都繫結到document上，需要注意的一點就是jQuery已經貼心的幫我們把this處理為事件源，處理起來更是如魚得水了。
delegate與bind
通過上面我們說一堆我們可以在權衡使用bind還是delegate上有一定依據了，如果就單獨繫結一個元素的事件處理程式，用bind還是很合適的，但是如果處理很多類似元素的事件處理程式的時候不妨考慮一下delegate，看看是否對提高效能有所幫助。