js的事件委托

一、什么是事件委托

        利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

二、为什么需要用事件委托

        如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互          次数，提高性能

三、事件委托原理

        利用的是事件冒泡的原理

四、实例

       移到li时对应的li颜色变化

        普通方式：

            
111
            
222
            
333
            
444
    

委托方式：

            
111
            
222
            
333
            
444
    


var oUl = document.getElementById("ul1");
        var oLi = oUl.getElementsByTagName("li");
        oUl.onmouseover = function(ev){
            var ev = ev||window.ev;
            var target = ev.target||ev.srcElement;
           
            if(target.nodeName.toLowerCase()=="li"){
                target.style.background = "green"
            }
        }
        oUl.onmouseout = function(ev){
            var ev = ev||window.ev
            var target = ev.target||ev.srcElement;
            if(target.nodeName.toLowerCase()=="li"){
                target.style.background = ""
            }
        }

委托例子：
 

        
        
        
        
    



window.onload=function(){
            var obox = document.getElementById("box")
            obox.onclick = function(e){
                var e = e||window.event
                var target = e.target||e.srcElement;
                console.log(target)
                console.log(target.id)
                console.log(target.nodeName)
                 if(target.nodeName.toLocaleLowerCase()=='input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                } 
              }
            }
        }