js事件委托（事件代理）详解

1.介绍

事件冒泡： JS中当出发某些具有冒泡性质的事件是，首先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应，这就是事件冒泡。

事件委托： 利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。
优势：1.减少DOM操作，提高性能。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。

2.举例：

例子：页面上有这么一个节点树，div>ul>li>a比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

实现：

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

一般人实现功能是点击li，弹出123：

window.onload = function(){
   
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
   
        aLi[i].onclick = function(){
   
            alert(123);
        }
    }
}

上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

事件委托实现功能是点击li，弹出123：

/*
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，
也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，
当然&#x