詳解讀JavaScript中的事件流和事件處理程序（圖文教學）

事件流指的是從頁面中接收事件的順序,而事件處理程序則是處理事件的回應,接下來我們就來詳解JavaScript中的事件流和事件處理程序.

事件流：分成兩種，IE的是事件冒泡流，事件開始時從最具體的元素接收，逐級向上傳播到較為不具體的節點（Element -> Document）。與之相反的是 Netscape 的 事件捕獲流 。

DOM2級事件規定事件流包含三個階段：事件擷取階段、處於目標階段、事件冒泡階段。

大多數情況下都是將事件處理程序新增到事件流的冒泡階段。一個EventUtil 的栗子：

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      element.addEventListener(type, handler, false);
    }else if(element.attachEvent){
      element.attachEvent('on' + type, handler); // IE8
    }else{
      element['on' + type] = handler;
    }
  },
  removeHandler: function(){...}
}

下面我們詳細來看：

DOM0級事件處理程序透過Javascript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。
每個元素都有自己的事件處理程序屬性，這些屬性通常全部小寫，例如onclick。將這種屬性的值設為一個函數，就可以指定事件處理程序。

var btn = document.getElementById('myBtn');
// 添加事件处理程序
btn.onclick = function () {
  alert( this );//为DOM元素btn
};
// 移除事件处理程序
btn.onclick = null;

優點:1.簡單2.具有跨瀏覽器的優勢
缺點:在程式碼運行之前不會指定事件處理程序，因此這些程式碼在頁面中位於按鈕後面，就有可能在一段時間怎麼點擊都沒反應，使用者體驗變差。

DOM2級事件處理程序定義了兩個方法，用於處理指定和刪除事件處理程序的操作:addEventListener()和removeEventListener()。三個參數，1.要處理的事件名。 2.作為事件處理程序的函數3.一個布林值。最後這個布林值為true,表示在捕獲階段呼叫事件處理程序，false表示在冒泡階段呼叫事件處理程序。

// 添加多个事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
  alert( this );// 为DOM元素btn
},false );
btn.addEventListener('click',function () {
  alert('Hello World');
},false);

// 移除事件处理程序
btn.removeEventListener('click',function () {
  // 匿名函数无法被移除,移除失败
},false);
  // 改写
  var handler = function () {
  alert(this.id);
  };
  btn.addEventListener('click',handler,false);
  // 再次移除事件处理程序
  btn.removeEventListener('click',handler,false);// 移除成功

這兩個事件處理程序會按照新增他們的順序觸發。大多數情況，都是將事件處理程序新增至事件流的冒泡階段，這樣可以最大限度的兼容各種版本的瀏覽器。

優點: 一個元素可以新增多個事件處理程序
缺點: IE8及以下瀏覽器不支援DOM2級事件處理程序。 (包括IE8)

IE事件處理程序定義了兩個方法，與上類似:attachEvent(),detachEvent()。這兩個方法接收相同的兩個參數:事件處理程序名稱和事件處理程序函數。由於IE8以及更早版本的瀏覽器只支援事件冒泡，所以透過detachEvent()新增的事件處理程序會被加入到冒泡階段。

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
  alert( this );// window
});
btn.attachEvent('onclick', funciton(){
  alert("HELLO, WORLD");
});

點擊按鈕，這兩個事件處理程序的觸發順序與上述剛好相反。不是按照新增事件處理程序的順序觸發，剛好相反。

優點:一個元素可以新增多個事件處理程序
缺點:只支援IE。

跨瀏覽器的事件處理程序

eg:

var EventUtil = {
  addHandler : function ( ele, type, handler ) {
    if ( ele.addEventListener ) {
      ele.addEventListener( type, handler, false );
    } else if ( ele.attachEvent ) {
      ele.attachEvent( 'on' + type, handler );
    } else {
      ele['on' + type] = handler
    }
  },
  removeHandler: function ( ele, type, handler ) {
    if ( ele.removeEventListener ) {
      ele.removeEventListener( type, handler, false );
    } else if ( ele.detachEvent ) {
      ele.detachEvent( 'on' + type, handler );
    } else {
      ele[ 'on' + type ] = null;
    }
  }
}

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

相關文章：

JavaScript基礎心法（圖文教學，詳細為你解答）

javascript中遍歷EL表達式List集合中的值

#JavaScript運作原理詳細分析解答

以上是詳解讀JavaScript中的事件流和事件處理程序（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！