导语
在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是是多方面的：
1.每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差；
2.必须事先指定所有事件处理程序而导致的 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</hi>
</ul>
上面例子包含3个被点击后会执行操作的列表项。按照传统的做fa是为它们添加3个事件处理程序：
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1,"click",function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2,"click",function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3,"click",function(event){
alert("hi");
});
如果在一个复杂的 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 "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});
在这段代码里，我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序。由于所有列表项都是这个子元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。我们知道事件目标是被单击的列表项，故而可以通过检测 id 属性来决定采取适当的操作。与前面未使用事件委托的代码比一比，会发现这段代码的事前消耗更低，因为只取得了一个 DOM 元素，只添加了一个事件处理程序。虽然对用户来说最终的结果相同，但这种技术需要占用的内存更少。
所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用时间委托技术。
如果可行的话，也可以考虑为 document 对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与传统的做法相比具有如下优点：
1.document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待 DOMContentLoaded 或 load 事件）。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。
2.在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM 引用更少，所花的时间也更少。
3.整个页面占用的内存空间更少，能够提升整体性能。