JavaScript DOM事件模型

 

定義：

DOM（文檔對象模型）結構是一個樹形結構，當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間的路徑傳播，路徑所通過的節點都會收到該事件，這個傳播過程可稱爲DOM事件流。

主流瀏覽器的事件模型

直到DOM Level3中規定後，多數主流瀏覽器才陸陸續續支持DOM標準的事件處理模型一捕獲型與冒泡型。

目前除IE瀏覽器外，其餘主流的Firefox、Opera、 Safari 都支持標準的DOM事件處理模型。IE仍然使用本身的模型，即冒泡型，該模型的一部分被DOM採用。這點對於開發者來講也是有好處的，只使用 DOM標準，IE共有的事件處理方式纔能有效地跨瀏覽器。
冒泡型事件(Bubbling) :從DOM樹形結構上理解，就是事件由葉子節點沿祖先節點一直向上傳遞直到根節點:從瀏覽器界面視HTML元素排列層次上理解就是事件由具備從屬關係的最肯定的目標元素一直傳遞到最不肯定的目標元素。
推獲型事件(Capturing) : Netscape Navigator的實現。 它與冒泡型恰好相反。由DOM樹最項層元素一直到最精確的元素。
DOM標準事件模型:由於兩個不一樣的模型都有其優勢和解釋，DOM標準支持捕獲型與冒泡型,能夠說是它們二者的結合體。它能夠在個DOM元素上綁定多個事件處理器。而且在處理函數內部,this關鍵字仍然指向被綁定的DOM元素，另外處理函數參數列表的第一個位置傳遞事件event對象。
首先是捕獲式傳遞事件。接着是冒泡式傳遞，因此，若是一個處理函數既註冊了捕獲型事件的監聽又註冊了冒泡型事件監聽，那麼在DOM事件模型中它就會被調用兩次。

事件對象

在IE瀏覽器中事件對象是window對象的一個屬性event，而且event對象只能在事件發生時被訪問，全部事件處理完成後，該對象就消失了。而標準的DOM中規定event必須做爲惟一的參數傳給事件處理函數。故爲了實現兼容性，一般採用下面的方法：

function someHandle(event){

if(window.event) event=window.event;

}

 在檢測Shift. Alt和Ctrl這3個鍵時，兩種瀏覽器事件使用的方法也是同樣的。

      在IE中，事件的對象包含在event 的srcElement屬性中，而在標準的DOM瀏覽器中，對象包含在target屬性中。

      爲了處理兩種瀏覽器兼容性，舉例以下:   

  function handle(oEvent){

      if(window.event) oEvent = window.event;  //處理兼容性，得到事件對象

      var oTarget;

      if(oEvent.srcElement)  //處理兼容性，獲取事件目標

      oTarget = oEvent.srcElement;

      else

      oTarget = oEvent.target;

      alert(oTarget.tagName);  //彈出目標的標記名稱

      }

      window.onload = function(){

      var olmng =document.getElementsByTaganme("img")[0];

     olmg.onclick = handle;

      }

註冊與移除事件監聽器

1. IE下注冊多個事件監聽器與移除監聽器方法  

IE瀏覽器中的HTML元素有一個attachEvent()方法容許外界註冊該元素多個事件監聽器。例如:

element. attachEvent('onclick', observer);

注意
在IE7中註冊多個事件時，後加入的函數先被調用。

要移除先前註冊的事件的監聽器，調用element的detachEvent()方法便可，參數相同。例如:
element. detachEvent('onclick, observer);
2. DOM標準下注冊多個事件監聽器與移除監聽器方法

實現DOM標準的瀏覽器與IE瀏覽器中註冊元素事件監聽器方式有所不一樣，它經過元素的addEventListener方法註冊，該方法既支持註冊冒泡型事件處理，又支持捕獲型事件處理。

element.addEventListener('click', observer, useCapture);
addEventListener()方法接受3個參數。第一個參數是事件名稱，值得注意的是，這裏事件名稱與IE不一樣。事件名稱是不以"on"開頭的:第二個參數obsever是回調處理函數:第3個參數註明該處理回調函數是在事件傳遞過程當中的捕獲階段被調用仍是冒泡階段被調用，默認true爲捕獲階段。

移除已註冊的事件監聽器調用element的removeEventListener()便可，參數不變。               element.removeEventListener('click', observer, useCapture);

3.直接在DOM節點上加事件
(1)如何取消瀏覽器事件的傳遞與事件傳遞後瀏覽器的默認處理
取消事件傳遞，是指中止捕獲型事件或冒泡型事件的進一步傳遞。例如，在冒泡型事件傳遞中，在body處理中止事件傳遞後，位於上層的document的事件監聽器就再也不收到通知，再也不被處理。
事件傳遞後的默認處理，是指瀏覽器在事件傳遞並處理完後會執行與該事件關聯的默認動做(若是存在這樣的動做)。
(2)取消瀏覽器的事件傳遞
在IE下，經過設置event對象的cancelBubble爲true便可。

function someHandle() {
window.event.cancelBubble = true;}

DOM標準經過調用event對象的stopPropagation()方法便可。 

function someHandle(event) {event.stopPropagation();}

所以，跨瀏覽器的中止事件傳遞的方法是: 

 function someHandle(event) {  
event = event||window.event;
if(event.stopPropagation)
  event.stopPropagation();
else event.cancelBubble = true;
}

(3)取消事件傳遞後的默認處理
在IE下，經過設置event對象的returnValue爲false便可。

function someHandle() {
window.event.returnValue = false;
}

DOM標準經過調用event 對象的preventDefault()方法便可。

function someHandle(event) {event.preventDefault();}

所以，跨瀏覽器的取消事件傳遞後的默認處理方法是:

function someHandle(event) {
event = event || window.event;
if(event.preventDefault)
event.preventDefault();
else event.returnValue = false;}