淺析JavaScript事件機制——事件模型

在各類瀏覽器中存在三種事件模型:原始事件模型,DOM2事件模型,IE事件模型.其中原始的事件模型被全部瀏覽器所支持,而DOM2中所定義的事件模型目前被除了IE之外的全部主流瀏覽器支持.下面咱們將這三種事件模型進行一個簡單的瞭解。

一：原始事件模型

在原始事件模型中（也有說DOM0級），事件發生後沒有傳播的概念，沒有事件流。事件發生，立刻處理。監聽函數只是元素的一個屬性值，經過指定元素的屬性值來綁定監聽器。書寫方式有兩種：

　　1.html代碼中指定屬性：

<input type="button" onclick="func1()"/>

　　2.在JavaScript代碼中指定屬性：

  document.getElementsByTagName('input')[0].onclick = func1;
  function func1(){
    //do sth
  }

　　讓咱們看看這樣的優缺點：

　　優勢：因此瀏覽器都兼容。

　　缺點：1.相同事件的監聽函數只能綁定一個，後綁定的會覆蓋掉前面的，如：a.onclick = func1; a.onclick = func2;將只會執行func2中的內容。

　　　　　2.沒法經過事件的冒泡、委託等機制（後面系列會講到）完成更多事情。

　　在一些簡單應用中時，用這樣的方式也能夠，速度也比較快。可是，若是在較爲複雜的模型中時，顯然用這個方式就比較麻煩了。

二：DOM2事件模型

　　此模型是W3C制定的標準模型，W3C制定的事件模型中，一次事件的發生包含三個過程：

　　(1)capturing phase:事件捕獲階段，事件被從document一直向下傳播到目標元素,在這過程當中若是有哪一個祖先元素對該事件感興趣能夠註冊本身的處理函數. 
　　(2)target phase:事件處理階段，事件到達目標元素,執行目標元素的事件處理函數. 
　　(3)bubbling phase:事件冒泡階段，事件從目標元素上升一直到達document,雖然全部的事件類型都會經歷captruing phase階段可是隻有部分事件會經歷bubbling phase階段,例如　　　submit事件就不會被上浮. 

　　全部的事件類型都會經歷captruing phase可是隻有部分事件會經歷bubbling phase階段,例如submit事件就不會被冒泡。 
　　在整個的事件傳播過程當中能夠調用event.stopPropagation()來中止事件的傳播,調用preventDefault()來阻止瀏覽器的默認行爲.

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

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

三：IE事件模型

　　E模型也提供了一個event對象封裝了事件的詳細信息,可是IE不把該對象傳入事件處理函數,因爲在任意時刻只會存在一個事件,因此IE把它做爲全局對象window的一個屬性,IE中的事件傳播模式對應於DOM2的第二和第三階段,首先執目標元素的處理函數,而後向上傳播到達document,ie中只能能捕捉鼠標事件,而DOM2中能夠捕捉全部的事件,IE中註冊和刪除事件處理函數的方法也不一樣於DOM2.

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

　　IE的事件模型已經能夠解決原始模型的三個缺點，但其本身的缺點就是兼容性，只有IE系列瀏覽器才能夠這樣寫。

以上即是事件的三種模型，咱們在開發的時候須要兼顧IE與非IE瀏覽器，因此註冊一個監聽器應該這樣寫：

var a = document.getElementById('a');
if(a.attachEvent){
    a.attachEvent('onclick',func);
}
else{
    a.addEventListener('click',func,false);
}

　　也許，這樣寫咱們會以爲有那麼點麻煩，因此，咱們一般藉助一些框架或類庫已經封裝好的，好比jquery，在jquery中，具備強大的事件監聽方式。