茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

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

DOM2級事件規(guī)定事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。

大多數情況下都是將事件處理程序添加到事件流的冒泡階段。一個 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指定事件處理程序的傳統(tǒng)方式，就是將一個函數賦值給一個事件處理程序屬性。

每個元素都有自己的事件處理程序屬性，這些屬性通常全部小寫，例如onclick。將這種屬性的值設置為一個函數，就可以指定事件處理程序。

var btn = document.getElementById('myBtn');

// 添加事件處理程序

btn.onclick = function () {

  alert( this );//為DOM元素btn

};

// 移除事件處理程序

btn.onclick = null;

優(yōu)點:1.簡單2.具有跨瀏覽器的優(yōu)勢

缺點:在代碼運行之前不會指定事件處理程序，因此這些代碼在頁面中位于按鈕后面，就有可能在一段時間怎么點擊都沒反應，用戶體驗變差。

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);// 移除成功

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

優(yōu)點: 一個元素可以添加多個事件處理程序

缺點: 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");

});

點擊按鈕，這兩個事件處理程序的觸發(fā)順序與上述剛好相反。不是按照添加事件處理程序的順序觸發(fā)，剛好相反。

優(yōu)點:一個元素可以添加多個事件處理程序

缺點:只支持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;

    }

  }

}