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引用少，添加的事件少
  • 　　頁面佔用的內存空間更少，可以提高總體性能。