事件委托（事件代理）

事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件。

为什么要用事件委托

在JS中添加事件会先获取到dom节点再进行添加，获取dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互时间，这就是为什么减少DOM操作能提升网页的性能。而且每个事件处理函数都会占用内存，事件处理函数越多，内存占用就越大。

如果使用事件委托，就只会对事件委托的这一个dom进行操作，与dom只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

事件委托的原理

事件委托是利用事件的冒泡原理来实现的，什么是事件冒泡呢？就是从触发事件的节点开始，然后一层一层向上传播事件，举个例子：页面上有以下节点树，div>ul>li>a;如果给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a触发点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

判断目标节点

以上面节点树div>ul>li>a为例，假如在最外面的div添加了点击事件，但是div里面有多个a标签。比如：<a id="a1"></a>、<a id="a2"></a>，当我们点击不同的a标签时，需要执行不一样的操作，那么我们应该怎么去做呢？

Event对象提供了一个属性叫target（IE:srcElement），该事件属性可以返回事件的目标节点（触发该事件的节点）。虽然不是真实的dom，但是target和普通节点一样都能获取节点的属性，以上面问题为例，我们可以通过判断target.id的值，来区别触发当前事件的节点，针对不同的节点执行不一样的操作。这样就达到和每一个节点都绑定一个事件同样的效果，且每次只执行一次dom操作。