对js事件流：冒泡和捕获的理解

前言：事件处理最重要的部分是事件捕获(Event capture)和事件冒泡(Event bubbling)这两种机制。为了说明这个问题，这里以W3C官网上的示例图为基础，以事例代码为例子来描述这一过程。下图是事件捕获和事件冒泡的过程。

当渲染引擎接收到一个事件的时候，它会通过HitTest(Webkit中一种检查触发事件在哪个区域的算法)检查哪个元素是直接的事件目标。在下图中，以“a”标签为例，假设它是事件的直接目标，这样，事件会经过自顶向下和自底向上两个过程。

一、什么是事件流

   由上图可知，DOM事件流主要包含三个阶段：

   ➊ 事件捕获阶段（红色箭头）。

   ➋ 目标事件（蓝色区域）

   ➌ 事件冒泡阶段 （紫色箭头）

二、理解捕获和冒泡

   捕获事件：事件的捕获是自顶向下，这也就是说document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，顺序是“#document”——>“html”——>“body”——>“ul”——>“li”——>“p”——>“a”。

   冒泡事件：事件的冒泡过程是自下向上的过程，事件开始是由具体的元素(标签)接收，然后逐级向上传播到最顶层的节点，这个过程像鱼冒泡一样所以叫冒泡事件。

三、添加代码片段帮助理解

   支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。

   

   运行结果：

 

  这下大家知道事件冒泡和捕获的执行顺序了吧。