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

taowen 發布于2019-08-19 17:39 / 403人閱讀

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

事件階段

事件分為三個階段：事件捕獲 --> 事件目標 --> 事件冒泡

事件捕獲和冒泡

事件捕獲：事件發生時（onclick,onmouseover……）首先發生在document上，然后依次傳遞給body、……最后到達目的節點（即事件目標）。

事件冒泡：事件到達事件目標之后不會結束，會逐層向上冒泡，直至document對象，跟事件捕獲相反

事件

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

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

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

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

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

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

默認事件行為：href=""鏈接，submit表單提交等

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

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

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

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

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

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

事件封裝

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

// 事件綁定
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( );    // 阻止事件的進一步傳播，包括（冒泡，捕獲），無參數
event.cancelBubble = true;   // true 為阻止冒泡

事件委托（事件代理）

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

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

來個例子吧，如果要多帶帶點擊table里面的td，普通做法是for循環給每個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;
          //判斷事件目標是否是td，是的話target即為目標節點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;
          //判斷事件目標是否是td，是的話target即為目標節點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"; 
  }

GPU云服務器云服務器 js事件委托 js阻止冒泡事件什么是js 事件委托委托事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78743.html

js事件冒泡和事件捕獲

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。事件冒泡：事件從...

SimonMa 2019-08-29 12:33 評論0 收藏0
js事件冒泡和事件捕獲

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。事件冒泡：事件從...

raoyi 2019-08-20 16:25 評論0 收藏0
js事件冒泡和事件捕獲

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。事件冒泡：事件從...

2i18ns 2019-08-01 16:47 評論0 收藏0
JS專題之事件模型

摘要：三事件流規定事件包括三個階段，事件捕獲，處于目標階段事件冒泡。一起來看添加新增加的，點擊發現沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。本文共 1960 字，讀完只需 8 分鐘事件用戶與網頁交互是通過事件實現的，事件剛開始是作為分擔服務器負載的一個手段，起初沒有統一的規范，直到 DOM2 級，網景和 I...

W4n9Hu1 2019-08-26 13:24 評論0 收藏0
JavaScript中幾個重要的知識點（2） ---- DOM事件

摘要：使用來移除事件，參數必須與要移除的事件處理函數地址指針相同。在低版本瀏覽器中，綁定級事件的方法為中的級事件的事件處理程序都是在冒泡階段執行的。 JavaScript中幾個最重要的大知識點面向對象 DOM事件異步交互ajax 事件事件就是文檔和瀏覽器的瞬間交互行為 1.事件類型點擊: click 滾輪: scroll 滑動: move 進入: enter 加載: load ...

dantezhao 2019-08-20 17:33 評論0 收藏0