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