JavaScript事件委托

事件委托：对于JavaScript来讲，事件委托又叫做事件代理，意思就是，click,mouseover.mouseout等事件，本来该事件是加在某个元素上，但是却加在其他的元素上处理该事件


原理;利用冒泡原理，把该事件加在父级元素上，执行触发
好处：1、提高性能
                                                        2、新添加的元素还会有之前的事件




例子：
<ul id="ul">
        <li>111111111111111111</li>
        <li>222222222222222222</li>
        <li>333333333333333333</li>
        <li>444444444444444444</li>
</ul>


没有用事件委托：
        window.onload=function(){
                var oUl=document.getElementById("ul");
                var oLi=document.getElementsByTagName("li");
                for(var i=0;i<oLi.length;i++){
                                        oLi[i].onmouseover=function(){
                                                                this.style.background="red";
                                        }
                                            oLi[i].onmouseout=function(){
                                                                this.style.background="yellow";
                                        } 
                    }


}


事件委托：


window.onload=function(){
                    var oUl=document.getElementById("ul");
                    var oLi=oUl.getElementsByTagName("li"); 
                
                        oUl.onmouseover=function(ev){
                                                var ev=ev||window;
                                                var traget=ev.target||ev.scrElement;
                                                if(traget.nodeName.toLowerCase()=="li"){
                                                                                traget.style.background="red";
                                                }
                        }


                        oUl.onmouseout=function(ev){
                                        var ev=ev||window;
                                        var traget=ev.traget||ev.srcElement;
                                        if(traget.nodeName.toLowercase()=="li"){
                                                                        traget.style.background="yellow";
                                                }
                                }
}




添加一个新的元素
<input type="button" id="btn">
<ul id="ul">
        <li>111111111111111111</li>
        <li>222222222222222222</li>
        <li>333333333333333333</li>
        <li>444444444444444444</li>
</ul>


var btn=document.getElementById("btn");
btn.onclick=function(){
                var iNow=5;
                var li=documnet.createElement("li");
                li.innerHtml=iNow*111111111111111111;
                oUl.appendChild(li);
}


没有用事件委托，新添加的li就不存在之前上面我们给li添加的onmouseover和onkouseout,因为for循环已经完成了，新增的li不在for循环里面