javascript事件模型介紹（圖文教學）

在各種瀏覽器中存在三種事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有瀏覽器所支援,而DOM2中所定義的事件模型目前由除了IE以外的所有主流瀏覽器支援。

一、原始事件模型

其事件類型:分為"輸入事件(如onclicki)"和"語意事件(如onsubmit)"

事件程序的註冊可以以下幾種方式:

1、JS程式碼作為HTML性質值

<input type="button" value="Press me" onclick="alert(&#39;thanks&#39;);"

2、事件處理程序作為JS屬性

附註：文檔中的每個HTML元素在文檔樹中都有一個相應的JS對象，這個JS對象的屬性對應於那個HTML元素的性質，無論作為HTML性質的JS代碼還是作為JS屬性的時間處理程序，其本身的屬性都是函數"function".

<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>

第一種賦值方式:

document.f1.b1.onclick=function(){alert('thanks');};

第二種賦值方式:

function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;

作為JS屬性的事件處理程序可以用JS屬性明確呼叫

document.myfrom.onsubmit();

事件處理程序可以回傳fale來阻止瀏覽器執行事件的預設動作，常用的如對onsubmit的操作。例外是
對超連結mouseover的window.status顯示事件的阻擋，是回傳true.例如:

<a href="help.htm" onmouseover="window.status=&#39;help&#39;;return true;">help</a>

二、DOM2事件模型

這個模型參考了IE的氣泡模型而製定的,它是由w3c制定的規範.在原始模型中事件一旦發生就直接調用事件句柄,沒有其它的事件傳播過程.而在DOM2模型中事件有一個特殊的傳播過程,分為三個階段:

(1)capturing phase:事件被從document一直向下傳播到目標元素,在這過程中如果有哪個祖先元素對該事件感興趣可以註冊自己的處理函數.

(2)target phase:事件到達目標元素,執行目標元素的事件處理函數.

(3)bubbling phase:事件從目標元素上升一直到達document,雖然所有的事件類型都會經歷captruing phase階段但是只有部分事件會經歷bubbling phase階段,例如submit事件就不會被上浮.
在整個的事件傳播過程中可以調用event.stopPropagation()來停止事件的傳播,呼叫preventDefault()來阻止瀏覽器的預設行為.

addEventListener("eventType","handler","true!false");
removeEventListner("eventType","handler","true!false");

三、IE模型

IE模型也提供了一個event物件封裝了事件的詳細資訊,但是IE不把該物件傳入事件處理函數,由於在任意時刻只會存在一個事件,所以IE把它作為全局物件window的一個屬性,IE中的事件傳播模式對應於DOM2的第二和第三階段,先執目標元素的處理函數,然後向上傳播到達document,ie中只能能捕捉滑鼠事件,而DOM2中可以捕捉所有的事件,IE中註冊和刪除事件處理函數的方法也不同於DOM2.

事件處理函數的註冊和刪除是透過元素的attachEvent("eventType","handler") and detachEvent("eventType","handler" ),與dom2不同的是eventType有on前綴

特點：
1、傳播過程只起泡，不捕捉。起泡中斷方法：

window.ecent.cancelBubble=true;

2、Event物件不是事件處理程序的函數參數，而是window的全域變數。
3、事件註冊函數:attachEvent()與反註冊：detachEvent().  

四、Netscape4事件模型

由於Netscape好像已經完全停止開發，所以就不詳述了，簡單的說：就是只捕捉不起泡。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

深入理解Javascript中的自執行匿名函數（圖文教學）

詳細講解javascript 中new運算子的原理（圖文教學）

詳細解讀JavaScript函數的四個存在形態（圖文教學）

#

以上是javascript事件模型介紹（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！