js和jQuery的事件委托

事件是onclick，onmouseover，onmouseout等，委托事件是一个事件本来是加在某个元素上的，然而却加在了别人身上，来完成这个事件。

原理：利用冒泡，把事件加在父级上，触发执行效果。

好处：1、提高性能，从而提高用户体验。

例子：触发每个li来改变其背景颜色：在li上添加鼠标事件

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

 

window.onload = function(){
  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 = "";
    }
  }
}

 for循环比较影响性能，下面用委托事件来实现上述的效果

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "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 = "";
    }
  }
}

 好处2：新添加的元素仍然有上面的事件

需求：添加动态的li，点击button动态添加li

<input type="button" id="btn" />
<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

 不用委托事件需要这样做：

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

 这样做新添加的li没有鼠标事件，不能改变背景色，因为点击添加的时候for循环已经执行完成。

用委托事件来做：

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "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 = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

 并且新添加的li有自己的鼠标事件。

下面使用jQuery实现上述效果的委托：

$(function(){
 var $ul = $("#ul");
 var $li = $("li");
 
//  debugger;
 $ul.mouseover(function(e){
  var e = e || window.e;
  var target = e.target || e.srcElement;
  if(target.nodeName.toLowerCase() == 'li'){
   target.style.background = "red";
  }
 });
 
 $ul.mouseout(function(e){
  var e = e || window.e;
  var target = e.target || e.srcElement;
  if(target.nodeName.toLowerCase() == 'li'){
   target.style.background = "";
  }
 });
 
 var iNow = 4;
 $("#btn").click(function(){
  var iNows = 1111 * iNow;
  var li = '<li>'+iNows+'</li>';
  $ul.append(li);
  iNow ++;
 });
});