javascript事件冒泡捕獲並阻止事件傳播範例程式碼詳解

1.什麼是事件冒泡？

在排序演算法中，我們學過冒泡排序法，所謂冒泡就是讓底層的東西浮出水面，對於事件冒泡也同樣是如此，

下面我們來看一個例子來說明什麼是事件冒泡。

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

當支援事件冒泡時，當我們點擊"測試」按鈕時，首先會執行的是alert("button")，固名思意：

事件依照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。

當p,button,html根元素都有事件時，事件執行的順序為：

#button->p->html

2 .什麼是事件捕獲？

我們再來看事件捕獲，相對於事件捕獲，處理時間的順序與事件冒泡截然相反，同樣：

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

執行這段程式碼，首先會alert("p")，其次會alert("button")。我們明確事件捕獲的概念：

事件從最不精確的物件(document 物件)開始觸發，然後到最精確。

同樣的如果button,p,html元素上都有綁定事件，那麼事件的實施順序為：

html->p->button

3.各版本的瀏覽器對事件的處理機制？

(1)在DOM中，即支援事件冒泡，也支援事件捕獲，在W3C的標準中，認為任何事件都是從事件捕獲出發，找到最終的結點，此後再進行冒泡，會到根結點。

DOM中支援事件綁定的函數為：

addEventListener("事件名"，函数，userCapture);

對於userCapture參數，預設為false，支援事件冒泡。
若在userCapture參數，為true時，支援事件擷取。

(2)對於許多瀏覽器，都支援addEventListener方法，但IE不支援！

(3) IE中的事件處理機制，IE中只支援事件冒泡，IE中有一個獨有的事件綁定方法

attachEvent方法，此方法有兩個參數：

attachEvent("事件名"，"函数名")

4.如何阻止事件的傳播？

無論是事件冒泡還是事件捕獲都是可以阻止的。

(1)首先在W3C中阻止事件的傳播方法為：stopPropagation(),在IE中，透過設定

cancelBubble=true;

(2) 如何阻止事件的預設行為？在W3C標準中，使用preventDefault方法，在IE中透過設定

window.event.returnValue = false;

以上是javascript事件冒泡捕獲並阻止事件傳播範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！