首頁 > web前端 > js教程 > javascript事件冒泡捕獲並阻止事件傳播範例程式碼詳解

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

伊谢尔伦
發布: 2017-07-22 16:41:30
原創
2085 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板