DOM事件流，事件冒泡，事件捕获，事件委托，事件监听

前端中的事件流

1.什么是事件流：事件流描述的是从页面中接收事件的顺序。
即是，事件的流向，先捕获，再到事件源，最后再冒泡。

DOM2级事件流包括以下阶段：

• 事件捕获阶段：实际目标div在捕获阶段不会接受事件，也就是在捕获阶段，事件从document到html再到body就停止了。
• 处于目标阶段：事件在div发生并处理，但是事件处理会被看成冒泡阶段的一部分。
• 事件冒泡阶段：事件又传播回到文档
• addEventListener：addEventListener是DOM2级事件中新增的指定事件处理程序的操作，这个方法只接受3个参数：要处理的事件名、作为事件处理函数的程序、一个布尔值。（如果这个布尔值是true，则表示在捕获阶段调用事件处理程序；如果是flase，则表示在冒泡阶段调用事件处理程序）。
  大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。

事件冒泡 和事件捕获

事件冒泡和事件捕获只有DOM2级支持。DOM0级和IE只支持事件冒泡

• 事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；

       从具体的元素到不确定的元素。
  

• 事件捕获： 从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。

      从不确定的元素到具体的元素。
  

• 事件冒泡（原理）：就是元素自身的事件被触发后，如果父元素的有相同的事件，如：onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。

• 事件代理：利用事件的冒泡原理来实现的。在捕获阶段中的实际应用：可以在父元素层面阻止事件向子元素传播，也可代替子元素执行某些操作。

如何让事件先冒泡后捕获

在DOM标准事件模型中，是先捕获后冒泡的。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。

事件委托

事件委托：就是利用冒泡阶段的运行机制来实现的，就是把一个元素响应事件的函数委托到另一个元素上，一般是把一组元素的事件委托到他的父元素上。
即是指：不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。

eg：ul和li标签的事件监听，比如我们在添加事件的时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。

事件委托的优点是：
1.减少内存消耗，节约效率
2.适合动态元素的绑定事件，（新添加的元素也会有监听函数，也可以有事件触发机制）

什么是事件监听

• addEventListener（）方法，用于指向元素添加事件句柄，可以更简单的控制事件。

• 语法为：

  element.addEventListener(event,function,useCapture);
  第一个参数是：事件的类型（如：“click”,"mousedown"）；
  第二个参数是：事件触发后调用的函数。
  第二个参数是：布尔值 用于描述事件是冒泡还是捕获。true：表示捕获；flase表示冒泡。（该参数是可选的）