Javascript中的事件委托(事件代理)

事件委托利用了事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件。
通过事件冒泡的原理，利用父级去触发子级的事件（即事件绑定在父节点上）。

事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效.

使用事件委托的原因:

例如:有100个li，每个li都有相同的click点击事件，如果用for循环的方法，来遍历所有的li，然后给它们添加事件,这样操作存在的问题:每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了

<ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
window.onload = function(){
    var ul = document.getElementById("ul");
    var aLi = ul.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert("li);
        }
    }
}

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因.

使用事件委托的好处：

使用事件委托,避免对每个子元素添加事件监听器，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，减少操作DOM节点的次数，从而减少浏览器的重绘和重排,大大提高了性能。

有一个包含三个li的无序列表ul，点击每一个li时alert里边的内容.用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发.

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