#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;
    }
};