Js - 事件代理

　　　事件代理是利用了事件冒泡，制定一个事件处理程序，就可以管理某一类的所有事件。例如，click事件会一直冒泡到document层次（就是不断地向父元素传递至最上层的document）。就是说可以为整个页面指定一个onclick事件处理程序，而不必单个元素分别添加处理程序。

 <ul id="ul1">
        <li >item1</li>
        <li >item2</li>
        <li >item3</li>
    </ul>

　　不过，在没有接触事件代理的时候，我觉得我和大部分人一样都只会使用单个绑定：

window.onload= function () {
        var ul=document.getElementById("ul1");
        var aLi=ul.getElementsByTagName("li");

        for(var i=0;i<aLi.length;i++){
            aLi[i].onclick= function () {
                alert(this.innerHTML);
            }
        }

    }

　　根据上面的描述，事件代理是利用的事件冒泡，会一直向上传递，因此我们可以使用事件代理，只需在DOM树尽量高的层次上添加事件处理程序。

window.onload= function () {
        var ul=document.getElementById("ul1");

        ul.onclick= function (event) {
            var e=event||window.event;
            var event= e.target || e.srcElement;
            switch (event.id){
                case "item1":
                    alert("item1");
                    break;
                case "item2":
                    alert("item2");
                    break;
                case "item3":
                    alert("item3");
                    break;
            }
        }
    }

　　这段代码里，只为ul添加了onclick事件，所以的列表项都是这个元素的子节点，事件又会冒泡，所以单击事件最终会被这个函数处理。与前面未使用事件代理的代码比较，这段消耗更少。只取了一个DOM元素，只添加了一个时间，结果是一样的。

　　　综上

　　　可以在页面上添加一个事件处理程序，处理某种特定的事件，这样与传统的做法有以下好处：

• • 　　只添加一个事件处理程序所需的DOM引用少，所画的事件更少
  • 　　页面占用的内存空间更少，能够提升整体性能。