关于js事件委托

由于事件处理程序可以为现代 Web 应用程序提供交互能力，因此许多开发人员会不分青红皂白地 向页面中添加大量的处理程序。

在创建 GUI 的语言（如 C#）中，为 GUI 中的每个按钮添加一个 onclick 事件处理程序是司空见惯的事，而且这样做也不会导致什么问题。

可是在 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>

　　

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 对象添加一个事件处理程序，用以处理页面上发生的某种 特定类型的事件。这样做与采取传统的做法相比具有如下优点。

 document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序 （无需等待 DOMContentLoaded 或 load 事件）。换句话说，只要可单击的元素呈现在页面上， 就可以立即具备适当的功能。

 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM 引用更少， 所花的时间也更少。

 整个页面占用的内存空间更少，能够提升整体性能。 最适合采用事件委托技术的事件包括 click、mousedown、mouseup、keydown、keyup 和 keypress。 虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。 （因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。）