js的事件委托

一、什么是事件委托

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

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

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

三、事件委托原理

        利用的是事件冒泡的原理

四、实例

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

        普通方式：

<ul id="ul1">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
    </ul>
<script>
    var oUl = document.getElementById("ul1")
        var oLi =oUl.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 = ""
            }
        }  
</script>

委托方式：

<ul id="ul1">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
    </ul>


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 = ""
            }
        }

委托例子：
 

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>



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