事件委托

1. 概念

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果，如下所示：

window.onload=function(){
 var oUl=document.getElementById('ul1');
 var aLi=document.getElementsByTagName('li');
 oUl.onclick=function(){
    alert(123);
 }
}

<ul id='ul1'>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

2. 事件委托的好处

1)提高性能
背景：鼠标移上去的时候背景颜色变红，移开消失。

<ul id='ul1'>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

普通方法实现

window.onload=function(){
 var oUl=document.getElementById('ul1');
 var aLi=document.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='';
   }
 }

}

事件委托方法实现

event对象：事件源，不管在哪个事件中，只要你操作的那个元素就是时间源。
ie:window.event.srcElement
标准下：event.target

window.onload=function(){
 var oUl=document.getElementById('ul1');
 var aLi=document.getElementsByTagName('li');
 oUl.onmouseover=function(){
 /*通过寻找事件源，可以达到放在哪个li出现那个内容的效果*/
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   target.style.background='red';   
 }
 oUl.onmouseout=function(){
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   target.style.background='';   
 }

}

上面还有一个bug，就是假如移到了ul标签上，整个ul变红。

nodeName 找到当前元素的标签名，大写

window.onload=function(){
 var oUl=document.getElementById('ul1');
 var aLi=document.getElementsByTagName('li');
 oUl.onmouseover=function(){
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   if(target.nodeName.toLowerCase（）=='li'){
    target.style.background='red';   
   }
 }
 oUl.onmouseout=function(){
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   if(target.nodeName.toLowerCase（）=='li'){
   target.style.background='';   
   }
 }

}

2)新添加的元素，还会有之前的事件
背景:点击按钮添加，在后面继续添加li标签，内容也是累加。

<input type="button" value="添加" id="input1"/>
<ul id='ul1'>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

window.onload=function(){
 var oUl=document.getElementById('ul1');
 var aLi=document.getElementsByTagName('li');
 var oInput=document.getElementById('input1');
 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='';
   }
 }
 oInput.onclick=function(){
  iNow++;
  var oLi=document.createElement('li');
  oLi.innerHTML=1111*iNow;
  oUl.appendChild(oLi);
 }
}

注意，上面代码添加新的li后，新添加的li不会有之前的事件效果，即鼠标移上去变红。为了解决这个问题，可以用事件委托。把之前的代码移上来就好了。

window.onload=function(){
 var oUl=document.getElementById('ul1');
 var aLi=document.getElementsByTagName('li');
 var oInput=document.getElementById('input1');
 var iNow=4;
 oUl.onmouseover=function(){
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   if(target.nodeName.toLowerCase（）=='li'){
    target.style.background='red';   
   }
 }
 oUl.onmouseout=function(){
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   if(target.nodeName.toLowerCase（）=='li'){
   target.style.background='';   
   }
 }
 oInput.onclick=function(){
  iNow++;
  var oLi=document.createElement('li');
  oLi.innerHTML=1111*iNow;
  oUl.appendChild(oLi);
 }
}