事件委托的原理及优点分析

事件委托又称事件代理，下面将要将要简要叙述一下这种方法的原理及优点。

一、什么是事件委托？

我们看下面的例子：

<ul id='myLinks'>
<li id='goSomewhere'>Go Somewhere</li>
<li id='doSomething'>Do Something</li>
<li id='sayHi'>Say hi</li>
</ul>

假使我们需要对3个li元素添加点击事件：

传统的方法是分别给每个li元素绑定click事件。

假使li元素特别多呢？可能你已经想到这样一个一个添加click事件是相当麻烦的，那么是否有优化方法呢？

当然，我们只需要在ul元素上添加一个事件处理程序。这种在DOM树中尽量最高的层次上添加事件处理程序的方式便是事件委托，主要用于解决“事件处理程序过多”问题。

二、事件委托如何工作？

我们现在的疑问是：ul元素如何知道li元素点击了呢？

很简单，由于所有li元素都是ul元素的子节点，故他们的事件会冒泡，无论点击哪个li元素，实际上都相当于点击了ul元素。

现在产生了另一个问题：ul元素如何知道是在哪个li元素上点击的呢？

我们很容易想到，在ul的事件处理程序中检测事件对象的target属性，就可以得到真正点击的目标元素。

三、事件委托的优点

首先，我们看到添加的事件处理程序减少，可以只有一个事件处理程序。由于每个函数都是对象，对象会占用内存，内存的占用关系到性能。因此第一个优点是：

减少了内存
4000
占用，性能更好；

在访问DOM方面，也使得DOM访问次数减少。试想一下，如果要为许多的DOM元素绑定事件，自然需要多次访问DOM元素，设置事件处理程序所需时间更长，整个页面就绪需要的时间越多。因此第二个优点是：

设置事件处理程序所需时间更少，加快了整个页面的交互就绪时间。

假使我们将事件处理程序绑定到document对象上，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。即还会有一个额外的优点：

document很快就可以访问，而且可以在页面生命周期的任何时点添加事件处理程序，而不用等待其他事件完成如DOMContentLoaded、load事件。