事件委托

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); }}