javascript效能最佳化 之 事件委託

為下面每個LI綁定一個click事件

    <ul id="myLinks">       <li id="goSomewhere" >Go somewhere</li>       <li id="doSomething" >Do something</li>       <li id="sayHi" >Say hi</li>    </ul>

1、傳統寫法

    var item1=document.getElementById("goSomewhere");    var item2=document.getElementById("doSomething");    var item3=document.getElementById("sayHi");    item1.onclick = function(){        console.log('goSomewhere');    }    item2.onclick = function(){        console.log('doSomething');    }    item3.onclick = function(){        alert("hello");    }

　　在javascript中，添加到頁面上的事件處理常式數量將直接關係到頁面的整體運行效能，事件越多，效能越差。
　　導致原因是多方面：
　　　　1、每個函數都是對象，都會佔用記憶體；記憶體中的對象越多，效能就越差。
　　　　2、必須事先指定所有事件處理常式而導致的DOM訪問次數，會延遲整個頁面的互動就緒時間。

2、事件委託

　　對“事件處理常式過多”問題的解決方案就是事件委託。
　　事件委託利用了事件冒泡，只指定一個事件處理常式，就可以管理某一類型的所有事件。例如：click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理常式，而不必給每個可單擊的元素分別添加事件處理常式。

　　事件委託方法：

    var list=document.getElementById("myLinks");    list.onclick = function(e){        var target = e.target;                switch(target.id){            case "goSomewhere":                console.log('goSomewhere');                break;              case "doSomething":                console.log('doSomething');                break;             case "sayHi":                alert("hello");                break;         }    }

3、使用事件委託的優點：
　　1）document對象很快就可以訪問，而且可以在頁面生命週期的任何時間點上為它添加事件處理常式(無需等待DOMContentLoaded或load事件)。換句話說，只要可單擊的元素呈現在頁面上，就可以立即具備適當的功能。
　　2）在頁面中設定事件處理常式所需的時間更少。只添加一個事件處理常式所需的Dom引用更少，所花的時間也更少。
　　3）整個頁面佔用的記憶體空間更少，能夠提升整體效能。

 

參考自《javascript進階程式設計》