javascript事件捕獲機制【深入分析IE和DOM中的事件模型】

NO IMAGE

本文例項分析了javascript事件捕獲機制。分享給大家供大家參考,具體如下:

1.什麼是事件冒泡?

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

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


<div>
<button>測試</button>
</div>
<script>
$("div").bind("click",function(){alert("div")});
$("button").bind("click",function(){alert("button"});
</script>

當支援事件冒泡時,當我們點選”測試”按鈕時,首先會執行的是alert(“button”),固名思意:

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

當div,button,html根元素都有事件時,事件執行的順序為:

button->div->html

2.什麼是事件捕獲?

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


<div>
<button>測試</button>
</div>
<script>
$("div").bind("click",function(){alert("div")});
$("button").bind("click",function(){alert("button"});
</script>

執行這段程式碼,首先會alert(“div”),其次會alert(“button”)。我們明確事件捕獲的概念:

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

同樣的如果button,div,html元素上都有繫結事件,那麼事件的實行順序為:

html->div->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;

PS:關於javascript常用事件及相關說明還可參考本站線上工具:

javascript事件與功能說明大全:
http://tools.jb51.net/table/javascript_event

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查詢演算法技巧總結》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程式設計有所幫助。

您可能感興趣的文章:

js DOM模型操作js事件模型與自定義事件例項解析javascript事件模型介紹javascript事件模型例項分析Javascript基礎知識(一)核心基礎語法與事件模型ASP.NET的事件模型(很適合學習的文章)事件模型在各瀏覽器中存在差異關於javascript DOM事件模型的兩件事帶你快速理解javascript中的事件模型