javascript的事件捕獲和事件冒泡

W3C規範對於指令碼事件有兩種處理方式,第一種為冒泡模型,第二種是事件捕獲模型,前者為早期瀏覽器所支援的(也稱DOM 0標準),後者為W3C規範推薦的方法(也稱DMO 2標準).

其主要區別:

@1:事件捕獲不依賴於特定的事件來處理屬性

@2:你可以對任何對象的任何一種事件註冊多個事件控制代碼函數

第一個javascript程式<script type="text/javascript">        function cascadeDown(event){alert("capturing" + this);}function bubleUp(event){alert("bubleUp" + this);}function setup(){//事件捕獲document.addEventListener("click",cascadeDown,true);//以捕獲事件方式document.forms[0].addEventListener("click",cascadeDown,true);document.forms[0].elements[0].addEventListener("click",cascadeDown,true);//事件冒泡document.addEventListener("click", bubleUp, false);document.forms[0].addEventListener("click",bubleUp,false);document.forms[0].elements[0].addEventListener("click",bubleUp,false);}window.onload  = setup;</script>

上述代碼的執行結果為:

<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPGgyIGNsYXNzPQ=="headline-1">冒泡事件流: 當事件在某一DOM元素被觸發時，例如使用者在客戶名位元組點上點擊滑鼠，事件將跟隨著該節點繼承自的各個父節點冒泡穿過整個的DOM節點層次，直到它遇到依附有該事件類型處理器的節點，此時，該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡，在遵從W3C標準的瀏覽器裡可以通過呼叫事件對象上的stopPropagation()方法，在Internet Explorer裡可以通過設定事件對象的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過DOM冒泡直至到達文檔根

捕獲事件流:

事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中，事件會被從文檔根到事件目標元素之間各個繼承派生的元素所捕獲，如果事件監聽器在被註冊時設定了useCapture屬性為true,那麼它們可以被指派給這期間的任何元素以對事件做出處理；否則，事件會被接著傳遞給衍生元素路徑上的下一元素，直至目標元素。事件到達目標元素後，它會接著通過DOM節點再進行冒泡。