javascript事件委託

在引入事件委託以前，首先來看下面這個例子：點擊改變li的背景顏色。

<ul id="container">
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    window.onload = function () {
        var liLis = document.getElementsByTagName('li');
        for (var i = 0; i < liLis.length; i++) {
            //addEventListener不兼容ie9如下版本，請自行用attachEvent作兼容處理
            liLis[i].addEventListener('click', function (ev) {
                //兼容ie低版本
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                target.style.background = 'red';
            }, false)
        }
    }

上面能夠作到，點擊li，改變li的背景顏色爲紅色。可是請思考一個 問題，若是頁面存在不少的li，那麼使用for循環給全部的li都綁定click事件的話就將直接影響到頁面的總體運行性能，緣由是每一個函數都是對象，都會佔用內存，內存中的對象越多，性能就越差，其次事先指定全部事件處理程序而致使DOM訪問次數，會延遲整個頁面的交互就緒時間。針對「事件處理程序過多」這個問題， 事件委託這個解決方案就誕生了。

 

那麼 什麼是事件委託呢？事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。說簡單點兒，上面的click事件我不用給每一個li都綁定，只需在ul（DOM樹中儘可能高的層次上）上綁定一個click事件，就能夠管理全部li的click事件。

下面請看實現代碼。

    window.onload = function () {
        var ul = document.getElementById('container');
        //addEventListener不兼容ie9如下版本，請自行用attachEvent作兼容處理
        ul.addEventListener('click', function (ev) {
            //兼容ie低版本
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            //nodeName:找到元素標籤名
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = 'green';
            }
        }, false)
    }

上面這麼作的 好處：頁面中設置事件處理程序所需時間更少，只添加一個事件處理程序所需的DOM引用更少，所花的時間也更少；整個頁面佔用的內存空間更少，可以提高總體性能。

 

注意：1.對於使用appendChild方法添加的元素，在使用事件委託後，也可以綁定上事件；2，最適合採用事件委託技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress。雖然mouseover和mouseout事件也冒泡，可是要適當處理它們並不容易，並且常常須要計算元素的位置。（由於當鼠標從一個元素移到其子節點時，或者當鼠標移出該元素時，都會觸發mouseout事件  ）這點請讀者自行驗證。