js事件捕獲，事件冒泡，事件委託以及DOM事件流

標籤：style   io   color   ar   使用   sp   strong   div   on   

一：DOM事件流：

事件流是從頁面接收事件的順序，DOM2級事件規定事件流包括三個階段：

①事件捕獲階段：用意在於事件達到目標之前捕獲它，在事件捕獲階段事件流模型：document→html→body→div

②處於目標階段2：實際的目標到事件

③事件冒泡階段：由最具體的元素接收到事件，然後向上傳播到較為不具體的節點。事件流模型：div →body→ html→ document

二：事件委託

事件委託顧名思義：將事件委託給另外的元素。其實就是利用DOM的事件冒泡原理，將事件綁定到目標元素的父節點。

如果要為大量的元素節點綁定事件，完美可以用事件委託完美解決，直接將事件綁定在這些元素的父節點上，只需要綁定一次，就可以在所有子節點觸發事件。

三：常見的事件綁定：

（1）bind()

缺點：只能給調用它的時候已經存在的元素繫結事件，不能給未來新增的元素繫結事件，比如內容很多的時候，網頁中很多內容需要點擊“下一頁”的時候才會被載入，則這時新載入出的元素bind則沒有給他們綁定事件。

bind（）不能使用的情況：

①為DOM中的很多元素繫結相同事件；

②為DOM中尚不存在的元素繫結事件；

 

解決方案：使用live（）方法

(2)live()

方法會把click事件綁定到$(document)對象，而且只需要給$(document)綁定一次（不是50次，更不是5000次），然後就能夠處理後續動態載入的節點的事件。在接收到任何事件時，$(document)對象都會檢查事件類型和事件目標，如果是click事件且事件目標是td，那麼就執行委託給它的處理常式。

缺點：

 

①$()函數會找到當前頁面中的所有目標元素並建立jQuery對象，但在確認事件目標時卻不用這個集合，而是使用選擇符運算式與event.target或其祖先元素進行比較，因而產生這個jQuery對象會造成不必要的開銷；

②預設把事件綁定到$(document)元素，如果DOM嵌套結構很深，事件冒泡通過大量祖先元素會導致效能損失；

③只能放在直接選擇的元素後面，不能在連綴的DOM遍曆方法後面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；

④收集目標元素並建立jQuery對象，但實際操作的卻是$(document)對象，令人費解。

解決方案：

①為了避免事件冒泡造成的效能損失，jQuery從1.4開始支援在使用.live()方法時配合使用一個上下文參數：

 

$("td",$("#info_table")[0]).live("click",function() {/*顯示更多資訊*/});

 

這樣，“受託方”就從預設的$(document)變成了$("#info_table")[0]，節省了冒泡的旅程。不過，與.live()共同使用的上下文參數必須是一個單獨的DOM元素，所以這裡指定內容物件時使用的是$("#info_table")[0]，即使用數組的索引操作符來取得的一個DOM元素。

②使用閉包：

為了避免產生不必要的jQuery對象，可以使用一種叫做“早委託”的hack，即在$(document).ready()方法外部調用.live()：

(function($){    $("#info_table td").live("click",function(){/*顯示更多資訊*/});})(jQuery);

在此，(function($){...})(jQuery)是一個“立即執行的匿名函數”，構成了一個閉包，可以防止命名衝突。在匿名函數內部，$參數引用jQuery對象。這個匿名函數不會等到DOM就緒就會執行。（注意，使用這個hack時，指令碼必須是在頁面的head元素中連結和(或)執行的。之所以選擇這個時機，因為這時候剛好document元素可用，而整個DOM還遠未產生；如果把指令碼放在結束的body標籤前面，就沒有意義了，因為那時候DOM已經完全可用了。）

 

③使用delegate（）方法

（3）delegate（）：

 

delegate（）直接將目標元素選擇符（"td"）、事件（"click"）及處理常式與“受拖方”$("#info_table")綁定，不額外收集元素、事件傳播路徑縮短、語義明確；

delegate（）支援在連綴的DOM遍曆方法後面調用，即支援$("table").find("#info").delegate...，支援精確控制；

關於綁定語句的進化流程：

bind（）階段：

$("info_table td").bind("click", function()；

live（）階段：

①：$("#info_table td").live("click",function()



②：$("td",$("#info_table")[0]).live("click",function()

delegate()階段

$("#info_table").delegate("td","click",function)

 

js事件捕獲，事件冒泡，事件委託以及DOM事件流