JavaScript中的事件委托详解

内存和性能

在JavaScript中，添加到页面上的时间处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是一个对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

事件委托

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

    <ul id="myLinks">
        <li id="goSomewhere">go Somewhere</li>
        <li id="doSomething">do Something</li>
        <li id="sayHi">say Hi</li>
    </ul>

其中包含3个被单击后会执行操作的列表项，按照传统的方法，就是获取每一个dom元素，为他们分别添加事件处理程序，如果在复杂的web应用程序中，对所有的可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序，此时可以使用事件委托来技术来解决这个问题。使用事件委托只需要在DOM树中尽量最高的一个层次上添加一个事件处理程序

        var list = document.getElementById('myLinks')
        EventUtil.addHandler(list,'click',function (event) {
            event = EventUtil.getEvent(event)
            var target = EventUtil.getTarget(event)
            switch (target.id) {
                case 'goSomewhere':
                    location.href = 'http://www.baidu.com'
                    break;
                case 'doSomething':
                   document.title = 'this is a title'
                    break;
                case 'sayHi':
                   alert('hello')
                    break;
                default:
                    break;
            }
        })

与未使用事件委托的代码比较，会发现这段代码的事前消耗更低，因为只获取一个dom元素，只添加了一个事件处理程序。虽然对用户来说最终的结果相同，但是这种技术需要的占用的内存更少。

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress虽然mouseover和

mouseout事件也会冒泡，但是要适当处理他们并不容易，而且经常需要计算元素的位置