JavaScript學習總結--事件委託

 通常狀況下咱們對一個DOM元素綁定事件時有三種方式

//省略以前代碼
<div onclick="eventFn()"></div>

aDiv=onclick=function(){
  //...  
}

aDiv.addEventListener('click',function(){
    //...
},false)

這樣寫是沒有任何問題的（固然方法1並不可取）

可是在實際開發中咱們會碰到諸如十幾二十個li元素綁定事件的狀況，甚至更多的元素，那麼事件綁定這種給每個元素都循環綁定的方式就會影響性能

因此咱們能夠利用事件冒泡的機制，使用事件委託的方法避免過多的性能損耗

簡單來講就是將事件綁定到儘量層級較高的父元素上，而元素觸發事件後會逐級向上冒泡，利用事件對象event來判斷事件冒泡是否傳播到咱們須要綁定事件的元素上

舉個栗子

//有這樣一個html結構
<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

咱們須要鼠標每次移入移出li元素改變li的背景顏色

首先咱們利用傳統的事件綁定來作，代碼以下

var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");

for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
}

而使用事件委託實現是這樣的

var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
//這裏先把事件添加到ul上
oUl.onmouseover=function(e){
    //這裏須要用到事件對象來判斷觸發的元素
  var ev=e||window.event;  
  var target = ev.target || ev.srcElement;
  //兼容各大瀏覽器  
  if(target.nodeName.toLowerCase() == "li"){
  //判斷事件冒泡是否傳播到li元素  
    target.style.background = "red";
   }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}

這樣寫看起來麻煩了很多，實際上能爲咱們節省很大一部分的性能損耗

事件委託還有另一個好處

在傳統的事件綁定中，假如上面的ul中的li元素數量是不固定的，也就是說有可能在實際運行中會產生動態添加的li元素

那麼這個時候事件綁定是沒法給動態生成的li元素綁定事件的，因此就必須用事件委託來給新生成的元素添加事件