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引用少，添加的事件少
  • 　　页面占用的内存空间更少，可以提高总体性能。