JavaScript中的事件代理/委托

事件委托在JS高级程序设计中的定义为“利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件”

如何理解上面的这句话呢，在网上，大牛们一般都使用收快递这个例子来解释的，那我也来谈谈收快递

一个公司有三个人要取快递，一种方法是三个人都到楼下去等快递，另一种方法是让前台的MM代收快递，并且可以按照不同收件人的要求签收，一般实际中都是使用后者，因为后者还有一个优势就是，不管公司来了多少新员工，前台MM也能收到新员工的快递核实后代为签收。

那么为什么要用事件委托呢？有两个原因：

1、在JS程序中，添加到网页上的事件处理程序的数量将直接影响到网页的整体运行性能，因为需要不断与DOM节点进行交互，访问DOM节点的次数越多，引起浏览器重绘与重排的次数就越多，但是如果使用事件委托的话，只需要将所有操作放在JS程序中，与DOM节点只需要交互一次，大大提高了性能。
2、在JS中，每一个函数都是一个对象，所以创建的函数数量越多，占的内存空间也就越多，而事件委托就能大大减少函数的数量，从而减少对内存空间的占用。

再来说说事件委托的原理吧

事件委托其实就是运用事件冒泡的原理，给最外层的祖先节点绑定一个事件处理程序，当点击这个祖先节点里面的每一个后代节点，都会按照冒泡的原理，往上冒泡，直到触发到祖先节点的事件处理程序，就会触发相应的事件。

那么如何实现事件委托呢，先来看一下一个简单的例子，点击每一个li元素，都会输出123，我们一般的做法是如下

var oUl = document.getElementById("ul");
var oLis = document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
   oLis[i].onclick = function(){
      alert("123");
   }
}

以上程序相当于给每一个li节点都添加了一个点击事件的处理程序，相当于执行相同的操作，但是却要依次访问每一个节点，这样访问DOM节点的次数就很多了，那么用事件委托是如何实现的呢？看看下面的代码

var oUl = document.getElementById("ul");
   oUl.onclick = function(){
      alert("123");
   }

只需要给父节点ul添加一个点击事件，里面所有的li节点都会通过冒泡原理，触发到ul节点里面的事件处理程序，这样大大减少了DOM节点的操作，提高了网页的性能。

那么大家可能会问，如果我只想触发当前我点击的这个节点的事件要如何实现呢，JS里面的EVENT对象提供了一个属性叫做target，可以返回事件的目标节点，我们称为事件源，也就是说target可以理解为当前操作的节点，但不是真正操作这个节点,当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较。

window.onload = function(){
   var oUl = document.getElementById("ul");
   oUl.onclick = function(ev){
     var ev = window.event || ev;
     var target = ev.target || event.srcElement;
     if(target.nodeName.toLowerCase() == "li"){
         alert("123");
     }
   }
}

这个时候只有点击li元素才会触发事件处理程序了。

那么问题又来了，如果每一个li元素的事件处理程序都不一样呢，那么能用事件委托实现？先来看一下一般我们是如何实现的

<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 Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");
            
            Add.onclick = function(){
                alert('添加');
            };
            Remove.onclick = function(){
                alert('删除');
            };
            Move.onclick = function(){
                alert('移动');
            };
            Select.onclick = function(){
                alert('选择');
            }
            
        }

那如果用事件委托是如何实现的

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

用事件代理就可以做到只操作一次DOM节点，就能完成所有效果。

上面讲的都是文档加载完之后的事件处理，那么如果我们新添加了一个li元素呢，还可以有事件吗？我做了一个实验

<input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //鼠标移入变红，移出变白
            for(var i=0; i<aLi.length;i++){
                aLi[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                aLi[i].onmouseout = function(){
                    this.style.background = '#fff';
                }
            }
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

发现新增加的Li节点并没有事件可以触发,但是我们一般的解决方法是将事件处理函数封装在一个函数里面，每创建一个新节点都调用一次这个函数，代码如下

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            function mHover () {
                //鼠标移入变红，移出变白
                for(var i=0; i<aLi.length;i++){
                    aLi[i].onmouseover = function(){
                        this.style.background = 'red';
                    };
                    aLi[i].onmouseout = function(){
                        this.style.background = '#fff';
                    }
                }
            }
            mHover ();
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
                mHover ();
            };
        }

上面的代码已经解决了新添加元素也有事件的问题，但是问题又有了，这个方法大大的增加了DOM操作的次数，在性能上绝对不是一个好的实现方法，那可以使用事件委托来实现吗？

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //事件委托，添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }