事件委托

常见的导航栏中，li 的 onclick 事件，常常需要为每个 li 添加各自的事件。而采用事件委托的话，则可以通过事件冒泡，只需要为 ul 指定处理事件，就可以管理各个 li 的事件。

<ul id="list">
    <li id="a">A</li>
    <li id="b">B</li>
    <li id="c">C</li>
</ul>

若需要为三个 li 添加处理程序，常见的是：

var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");

//利用自己定义的通用工具对象EventUtil （参见 “JavaScript 通用函数整理”）
EventUtil.addHandler(a,"click",function(){alert("A")});
EventUtil.addHandler(b,"click",function(){alert("B")});
EventUtil.addHandler(c,"click",function(){alert("C")});

利用事件委托后：

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

EventUtil.addHandler(list,"click",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    switch(target.id){
        case "a":
            alert("A");break;
        case "b":
            alert("B");break;
        case "c":
            alert("C");break;
    }
});

这样一来，减少了页面中添加的事件的个数，也就是减少了函数对象，占用更少的内存，提高页面的整体运行性能。