JavaScript-事件委派

当我们有一堆子标签有相同的事件的时候， 可以通过遍历子标签为其添加事件，但如果又新增了子标签元素， 事件就需要为新增的字标签元素重新绑定，否则无效。 例如: 我们有一个ul标签，一个button按钮。ul里面有几个li标签，为li里面的的a标签添加了点击事件， 当点击button按钮的时候， 向ul里面新增一个li。

	<ul id="ul">
    <li><a href="javascript:;" class="link">超链接1</a></li>
    <li><a href="javascript:;" class="link">超链接2</a></li>
    <li><a href="javascript:;" class="link">超链接3</a></li>
    <li><a href="javascript:;" class="link">超链接4</a></li>
</ul>
<button id="btn01">添加超连接</button>

 var allA=document.getElementsByTagName("a");
        for(var i=0;i<allA.length;i++){
            allA[i].onclick=function(){
                alert("a标签点击事件");
            }
        }
        var btn01=document.getElementById("btn01");
        var ul=document.getElementById("ul");
        btn01.onclick=function(){
            var li=document.createElement("li");
            li.innerHTML=' <li><a href="javascript:;">超链接5555</a></li>';
            ul.appendChild(li);
        }

说明: 上面代码， 新增功能是好用的，但是新增的li标签里面的a标签， 没有点击事件。

• 事件委托的方式来实现

把事件绑定给祖先元素，这样当后台元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应事件来处理事件。
利用冒泡，通过委派可以减少事件绑定的次数，提供程序的性能

	  var ul=document.getElementById("ul");
        var btn01=document.getElementById("btn01");
        ul.onclick=function(event){
            //event兼容
            event=event||window.event;
            //如果触发的是我们期望的元素，则执行  event 中的target表示触发事件的对象
            if(event.target.className=="link"){
                alert("ul的单击响应函数");
            }
        }
        btn01.onclick=function(){
            var li=document.createElement("li");
            li.innerHTML=' <li><a href="javascript:;" class="link">超链接5555</a></li>';
            ul.appendChild(li);
        }

说明: 上面通过事件委托， 把a标签的点击事件委托给了外层父元素ul， 当a点击的时候会冒泡触发到ul的点击事件， 然后通过e.target属性判断当前点击的是不是a标签， 如果是的话执行函数。