事件的委派

• 事件的委派指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
• 事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

例子： 

 HTML代码：

    <button id="btn">添加超链接</button>
    <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>
    </ul>

预期效果：通过点击按钮，可以向ul中添加超链接列表，点击超链接时会弹出窗口，输出超链接的文本内容

JavaScript 代码：

window.onload = function () {
    //获取按钮
    var btn = document.getElementById("btn");
    //获取ul
    var ul = document.getElementById("ul");
    //为按钮绑定单击响应函数
    btn.onclick = function () {
        //创建一个li
        var li = document.createElement("li");
        //创建新的超链接
        li.innerHTML = "<li><a href='javascript:;''>新的超链接</a></li>";
        //获取新添加的超链接
        var a = li.getElementsByTagName("a")[0];
        //为新创建的超链接绑定响应函数
        a.onclick = function () {
             alert(a.innerHTML);
        };
        //将li添加到ul中
        ul.appendChild(li);
    };
    //获取所有的超链接
    var alla = document.getElementsByTagName("a");
    //为所有的超链接绑定单击响应函数
    for (var i = 0; i < alla.length; i++) {
            alla[i].onclick = function () {
                alert(this.innerHTML);
            };
    }

};

 这种为每个超链接都绑定一个单击响应函数比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定。可以用事件的委派只绑定一次事件，即可应用到多个元素上，即使是后添加的元素。可以将单击事件绑定给ul来实现。

JavaScript代码：

window.onload = function () {
    //获取按钮
    var btn = document.getElementById("btn");
    //获取ul
    var ul = document.getElementById("ul");
    //为按钮绑定单击响应函数
    btn.onclick = function () {
        //创建一个li
        var li = document.createElement("li");
        //创建新的超链接
        li.innerHTML = "<li><a href='javascript:;''>新的超链接</a></li>";
        //将li添加到ul中
        ul.appendChild(li);
    };
    //为ul绑定单击响应函数
    ul.onclick = function(event){
        event = event||window.event;
        //target,用于表示触发事件的对象
        //如果触发的对象是期望的元素，则执行，否则不执行
        if(event.target.className == "link")
            {
                alert(event.target.innerHTML);
            } 
    };
};