JS中的事件綁定，事件捕獲，事件冒泡以及事件委托，兼容IE

taowen 發(fā)布于2019-08-19 17:39 / 398人閱讀

摘要：事件階段事件分為三個階段事件捕獲事件目標(biāo)事件冒泡事件捕獲和冒泡事件捕獲事件發(fā)生時首先發(fā)生在上，然后依次傳遞給最后到達(dá)目的節(jié)點即事件目標(biāo)。

事件階段

事件分為三個階段：事件捕獲 --> 事件目標(biāo) --> 事件冒泡

事件捕獲和冒泡

事件捕獲：事件發(fā)生時（onclick,onmouseover……）首先發(fā)生在document上，然后依次傳遞給body、……最后到達(dá)目的節(jié)點（即事件目標(biāo)）。

事件冒泡：事件到達(dá)事件目標(biāo)之后不會結(jié)束，會逐層向上冒泡，直至document對象，跟事件捕獲相反

事件

onlick -->事件冒泡，重寫onlick會覆蓋之前屬性，沒有兼容性問題

el.onclik = null;   //解綁單擊事件，將onlick屬性設(shè)為null即可

addEventListener(event.type, handle, boolean); IE8及以下不支持，屬于DOM2級的方法，可添加多個方法不被覆蓋

//事件類型沒有on，false 表示在事件第三階段（冒泡）觸發(fā)，true表示在事件第一階段（捕獲）觸發(fā)。 如果handle是同一個方法，只執(zhí)行一次。
ele.addEventListener("click", function(){ }, false);  
//解綁事件，參數(shù)和綁定一樣
ele.removeEventListener(event.type, handle, boolean);

attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多個事件處理程序，只支持冒泡階段

//如果handle是同一個方法，綁定幾次執(zhí)行幾次，這點和addEventListener不同,事件類型要加on,例如onclick而不是click
ele.attachEvent("onclick", function(){ }); 
//解綁事件，參數(shù)和綁定一樣
ele.detachEvent("onclick", function(){ });

默認(rèn)事件行為：href=""鏈接，submit表單提交等

return false; 阻止獨享屬性（通過on這種方式）綁定的事件的默認(rèn)事件

ele.onclick = function() {
 ……                         //你的代碼
 return false;              //通過返回false值阻止默認(rèn)事件行為
};

event.preventDefault( ); 阻止通過 addEventListener( ) 添加的事件的默認(rèn)事件

element.addEventListener("click", function(e){
 var event = e || window.event;
 ……
 event.preventDefault( );      //阻止默認(rèn)事件
},false);

event.returnValue = false; 阻止通過 attachEvent( ) 添加的事件的默認(rèn)事件

element.attachEvent("onclick", function(e){
   var event = e || window.event;
   ……
   event.returnValue = false;       //阻止默認(rèn)事件
});

事件封裝

接下來我們把事件綁定以及事件解綁封裝成為一個函數(shù)，兼容瀏覽器

// 事件綁定
function addEvent(element, eType, handle, bol) {
 if(element.addEventListener){           //如果支持addEventListener
     element.addEventListener(eType, handle, bol);
 }else if(element.attachEvent){          //如果支持attachEvent
     element.attachEvent("on"+eType, handle);
 }else{                                  //否則使用兼容的onclick綁定
     element["on"+eType] = handle;
 }
}

// 事件解綁
function removeEvent(element, eType, handle, bol) {
 if(element.addEventListener){
     element.removeEventListener(eType, handle, bol);
 }else if(element.attachEvent){
     element.detachEvent("on"+eType, handle);
 }else{
     element["on"+eType] = null;
 }
}

事件冒泡、事件捕獲阻止

event.stopPropagation( );    // 阻止事件的進(jìn)一步傳播，包括（冒泡，捕獲），無參數(shù)
event.cancelBubble = true;   // true 為阻止冒泡

事件委托（事件代理）

事件委托：利用事件冒泡的特性，將里層的事件委托給外層事件，根據(jù)event對象的屬性進(jìn)行事件委托，改善性能。

使用事件委托能夠避免對特定的每個節(jié)點添加事件監(jiān)聽器；事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。

來個例子吧，如果要多帶帶點擊table里面的td，普通做法是for循環(huán)給每個td綁定事件，td少的話性能什么差別，td如果多了，就不行了，我們使用事件委托:

 

    　　
    　　
    　　
    　　
    　　
    　　
    　　
    　　
    　　
    　　
    table01 table02 table03 table04 table05 table06 table07 table08 table09 table10
    


  // JS
  var out = document.getElementById("out");
  if(out.addEventListener){
      out.addEventListener("click",function(e){
          var e = e||window.event;
          //IE沒有e.target，有e.srcElement
          var target = e.target||e.srcElement;
          //判斷事件目標(biāo)是否是td，是的話target即為目標(biāo)節(jié)點td
          if(target.tagName.toLowerCase()=="td"){
              changeStyle(target);
              console.log(target.innerHTML);
          }
      },false);
  }else{
      out.attachEvent("onclick",function(e){
          var e = e||window.event;
          //IE沒有e.target，有e.srcElement
          var target = e.target||e.srcElement;
          //判斷事件目標(biāo)是否是td，是的話target即為目標(biāo)節(jié)點td
          if(target.tagName.toLowerCase()=="td"){
              changeStyle(target);
              console.log(target.innerHTML);
          }
      });
  };
};

  function changeStyle(ele){
      ele.innerHTML = "已點擊"
      ele.style.background="#900";
      ele.style.color = "#fff"; 
  }