事件委托

什么是事件委托？
事件委托是一个解决方法，解决因事件处理程序过多而带来的页面整体性能问题。

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如：click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

下面通过一个例子来了解一下

<ul>
    <li id="item1">hello</li>
    <li id="item2">java</li>
    <li id="item3">script</li>
</ul>

其中包含3个被单击后会执行操作的列表项。按照传统的做法，需要为它们添加3个事件处理程序。

//获取元素
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');

//监听事件
EventUtil.addHandler(item1, 'click', function(event){
    location.href = "http://www.baidu.com";
});

EventUtil.addHandler(item2, 'click', function(event){
    document.title = "the new title";
});

EventUtil.addHandler(item3, 'click', function(event){
    alert("world");
});

如果在一个复杂的Web应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序。将上例进行改进：

var list = document.getElementById('links);

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

    switch(target.id){
        case "item1":
            document.title = "the new title";
            break;
        case "item2":
            location.href = "http://www.baidu.com";
            break;
        case "item3":
            alert("world");
            break;
    }
});

在这段代码里，使用事件委托只为ul元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且他们的事件会冒泡，所以单击事件终会被这个函数处理。

与前面未使用事件委托的代码相比，这段代码消耗更低，因为只取得了一个DOM元素，只添加了一个事件处理程序。虽然对用户来说最终的结果相同，但这种技术需要占用的内存更少。所有用到按钮的事件都适合采用事件委托技术。

如果可行的话，可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与传统的做法相比具有以下优点：
(1)document对象很快就可以访问，而且可以在页面声明周期的任何时点上为它添加事件处理程序。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。
(2)在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。
(3)整个页面占用的内存空间更少，能搞提升整体性能。

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。

参考书籍：《JavaScript高级程序设计》（第三版）
（完）