本文共 2529 字，大约阅读时间需要 8 分钟。

1. 概念

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

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

   
  
    
1111
  
    
2222
  
    
3333
  
    
4444
   

2. 事件委托的好处

1)提高性能

   
  
    
1111
  
    
2222
  
    
3333
  
    
4444
   

普通方法实现

window.onload=function(){    var oUl=document.getElementById('ul1'); var aLi=document.getElementsByTagName('li'); for(var i=0;i

事件委托方法实现

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)新添加的元素，还会有之前的事件

   
  
    
1111
  
    
2222
  
    
3333
  
    
4444
   

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

注意，上面代码添加新的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); }}