#Javascript高級編程讀書筆記#13.5 內存和性能

13.5 內存和性能

Javascript 中函數都是對象，過多被添加到事件的處理程序都會佔用內存，內存中對象越多性能就越差。其次，事先指定好全部事件處理程序而致使的DOM訪問次數也會延遲整個頁面的交互就緒時間

對付「事件處理程序過多」的方案就是事件委託，事件委託利用了事件冒泡只指定一個事件處理程序就能夠管理某一類型的全部事件，例如 click 時間會一直冒泡到 document 層次，能夠爲整個頁面指定一個 onclick 事件處理程序，而沒必要給每一個可單擊的元素都添加上這個事件

很差的作法:

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

// 爲全部元素都設置了事件處理邏輯
document.getElementId("goSomewhere").onclick = function(){
    location.href = "http://www.baidu.com";
};
document.getElementId("doSomething").onclick = function(){
    document.title = "I changed the document's title";
};
document.getElementId("talk").onclick = function(){
    alert("hi, man");
};

改良一下，只需在DOM樹儘可能最高層次上添加一個事件處理程序:

var list = document.getElementById("myLinks");

list.onclick = function(event){
    var target = event.target;

    switch(target.id){
        case "doSomething":
            document.title = "I changed the document's title";
            break;
        case "goSomewhere":
            location.href = "http://www.baidu.com";
            break;
        case "talk":
            alert("hi, man");
            break;
    }
};