大家好，我是IT修真院深圳分院第01期学员，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网 JS任务中可能会使用到的知识点：
JS中的event delegate，什么是event delegate（事件委托）
1.背景介绍
事件处理程序可以为现代web应用程序提供交互能力，因此许多开发人员会向页面中添加大量的处理程序。
但是在JavaScript中，添加到页面中的事件处理程序的数量会直接影响页面的整体运行性能。
理由：
1.每个函数都是对象，都会占用内存。
2.事先指定所有的事件处理程序会导致DOM的访问次数增加，会延迟整个页面的交互时间。 对“事件处理程序过多”问题的解决方案就是事件委托（Delegation）。--JavaScript高级程序设计
3.事件委托的基本实现方式：在DOM树中尽量高的节点添加事件处理程序，代替在其多个子节点中添加。
事件委托还有一个名字叫事件代理.
JS高程上讲：
事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
这里用取快递来解释这个现象：
有三个同事预计会在周一收到快递。为签收快递，有两种办法：
一是三个人在公司门口等快递；
二是委托给前台代为签收。
现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的：
第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的。
2.知识剖析
2.1为什么要用事件委托
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能， 因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多， 就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，100个li就要占用100个内存空间。 如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作， 与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
2.2事件委托的原理
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？
就是事件从最深的节点开始，然后逐步向上传播事件，
举个例子：
页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件， 那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div， 有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候， 都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
实例1、
子节点实现相同的功能：
这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的.
2.3 事件冒泡及捕获
DOM2.0模型将事件处理流程分为三个阶段：
一、事件捕获阶段，
二、事件目标阶段，
三、事件起泡阶段。
如图：
事件捕获：
当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，
随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。
在这个过程中，事件相应的监听函数是不会被触发的。
事件目标：
当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件起泡：
从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发。
2.4事件委托的优点
通过刚才的对比介绍，大家应该能够体会到使用事件委托对于web应用程序带来的几个优点：
1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。
3.常见问题
如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办?
比如说只有点击li才会触发?