JavaScript中的事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制。

事件冒泡怎么实现，先上代码：

我们写了三个box，结构是父子关系，分别绑定了打印事件，现在我们来点击最中间的粉色box ，按图显示来看，我们点击粉色box时，其余两个box也会触碰，触犯顺序是粉色>蓝色>黄色，这种现象就是事件冒泡了。我们再试试事件捕获，把上面代码里监听事件的第三个参数改为true，然后点击红色的box：

我们还是点击粉色box，和上一次一样，也是三个box都触发了事件，但是顺序反过来了，黄色>绿色>粉色，这种现象称为事件捕获。通过上面的例子，应该很容易就理解了事件冒泡和事件捕获，我们平时都是默认冒泡的，冒泡是一直冒到document根文档为止。

举个例子：

有三个同事预计会在周一收到快递，为了签收快递，有两种办法：1.三个人在公司门口等快递；2.委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收(可以给暂时不存在的节点也绑定上事件)。

事件委托怎么实现？

例子1：

上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的。Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）。这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！