事件委托

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处1：提高性能。

好处2：新添加的元素还会有之前的事件。

<button id="btn">添加li元素</button>

<ul id="A">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

window.onload=function(){
     var oUl=document.getElementById('A');
     var oLi=document.getElementsByTagName('li');
     var btn=document.getElementById('btn');
     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(){
     var ev=ev || window.event;
     var target=ev.target || ev.srcElement;
     //alert(target.innerHTML);
     if(target.nodeName.toLowerCase()=='li'){
         target.style.background='';
     }
}
优势:对于动态添加的li元素也能添加事件
var num=4;
btn.onclick=function(){
     num++;
     var Li=document.createElement('li');
     Li.innerHTML=num;
     oUl.appendChild(Li);
}
}