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元素绑定事件的，因此就必须用事件委托来给新生成的元素添加事件