浏览器事件机制-事件委托

浏览器事件机制讲的也是  JavaScript 事件流，JS事件执行的整个过程分为三个阶段：

• 事件捕获阶段
• 事件目标处理函数
• 事件冒泡

1.捕获（Capture）阶段是事件对象 event object 从 window 派发到目标对象父级的过程。
2.目标（Target）阶段是事件对象派发到目标元素时的阶段，如果事件类型指示其不冒泡，那事件传播将在此阶段终止。
3.冒泡（Bubbling）阶段 和捕获相反，是以目标对象父级到 window 的过程。
在任一阶段调用stopPropagation都将终止本次事件的传播。

事件捕获

当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。事件捕获和事件冒泡是相反的，也就是说，当用户触发了一个事件的时候，这个事件是从DOM树的最上层开始触发一直到捕获到事件源。

事件冒泡

假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡。 

事件委托

利用冒泡机制，我们就可以进行事件委托了。那么什么是事件委托（事件代理）呢？通俗的讲，事件就是onclick，onmouseover，onmouseout等，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。它的原理就是利用冒泡的原理，把事件加到父级上，监听子级的事件，来触发执行效果。

事件委托的作用

1. 支持为同一个DOM元素注册多个同类型事件
2. 可将事件分成事件捕获和事件冒泡机制
3. 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少
4. 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件