JS中的浮升和捕获

今天是想要根据我的理解来解释一下什么是浮升（冒泡）和捕获

如下图：

给div加监听的方法有三种：

1、是简单的DOM level0 的监听，比如：div1.οnclick=handler;

默认为 在浮升阶段调用事件处理程序。

2、是想要添加多个事件处理程序时，用于支持DOM level2的浏览器

比如：div1.addEventListener("click",handler ,true);    div1.addEventListener("click",handler ,false );

第三个参数为 true表示 捕获阶段调用事件处理程序（函数），为 false表示支持 浮升阶段调用事件处理程序，其他参数不解释。

3、 是想要添加多个事件处理程序时，用于不支持DOM level2的浏览器

比如：div1.attachElement("onclick",handler);

没有第三个参数，只支持 浮升阶段调用事件处理程序。

“DOM2级事件”规定的时间流包括三个阶段：事件捕获阶段、处于目标阶段（在事件处理中看成是冒泡阶段的一部分）和事件冒泡 | 浮升阶段。

捕获阶段：就像抓东西先抓外面一样，事件（如click）是从外层到内层传播

冒泡阶段：就先冒泡时，泡泡从里面冒出来一样，事件是从内层到外层传播

 

*****在这里就要解释一下事件传播和调用事件处理程序的顺序了：

1、我们知道给上图中的父元素div1加上事件监听，或者说是事件委托，那么当点击div2的时候同样会调用事件处理程序，那么事情是怎么发生的呢。

2、首先我们以事件冒泡为例：div1.addEventListener("click",handler,false);像这样给div1加上click监听，回调函数是handler，第三个参数为false，即在浮升阶段调用事件处理程序handler。

（1）当我们点击div2 的时候，click事件会从document一直传到div2（target）（捕获阶段），然后从div2（target）一直传回到document（浮升阶段）。

（2）由于加在div1中的handler（句柄）是要在浮升阶段调用的，那么只有当事件click在浮升阶段传播到div1的时候，handler才会被调用，而不是在click事件传到div2（target）的时候就调用了（我之前是这么认为的）。

3、现在我们以事件捕获为例：div1.addEventListener("click",handler,true);像这样给div1加上click监听，回调函数是handler，第三个参数为true，即在捕获阶段调用事件处理程序handler。

（1）同样的，当我们点击div2 的时候，click事件会从document一直传到div2（target）（捕获阶段），然后从div2（target）一直传回到document（浮升阶段）。

（2）由于加在div1中的handler（句柄）是要在捕获阶段调用的，那么当事件click在浮捕获阶段传播到div1的的时候，handler就被调用，而不是在click事件传到div2（target）的时候才调用了

现在如果有

div1. addEventListener("click",handler1,true);  //表示handler1这个 事件处理程序是在捕获阶段调用的

div2.addEventListener("click",handler2,true);  // 表示handler2这个事件处理程序是在捕获阶段调用的

那么 点击 div2的时候,由于两个事件处理程序都是在 捕获阶段调用，因此会先触发 （调用） 外层div1的监听函数（ handler1），再触发（调用） 内层div2的监听函数（ handler2）

如果是

div1. addEventListener("click",handler1,false);   //表示handler1这个 事件处理程序是在浮升阶段调用的

div2.addEventListener("click",handler2,false);  //表示handler2这个 事件处理程序是在浮升阶段调用的

那么 点击 div2 的时候,由于两个事件处理程序都是在浮升阶段调用，因此会 先触发 （调用） 外层div2 的监听函数（ handler2 ），再触发（调用） 内层div1 的监听函数（ handler1 ）

如果是

div1. addEventListener("click",handler1,true);    //表示handler1这个 事件处理程序是在捕获阶段调用的

div2.addEventListener("click",handler2,false);  //表示handler2这个 事件处理程序是在浮升阶段调用的

那么 点击 div2 的时候,由于 handler1 是在 捕获阶段 调用， handler2 是在 浮升阶段 调用，因此 会 先触发 （调用）应该在捕获阶段进行处理的 监听函数（ handler1 ）， 再触发（调用） 应该在浮升阶段进行处理的 的函数（ handler2）

如果是

div1. addEventListener("click",handler1,false);    //表示handler1这个 事件处理程序是在 浮升阶段 调用的

div2.addEventListener("click",handler2,true);  //表示handler2这个 事件处理程序是在 捕获阶段 调用的

那么 点击 div2 的时候,由于 handler1 是在 浮升阶段 调用， handler2 是在 捕获阶段 调用，因此 会 先触发 （调用应该在捕获阶段进行处理的 的监听函数（ handler2 ）， 再触发（调用） 应该在浮升阶段进行处理 的函数（ handler1）

PS：大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获他（事件）的时候将事件处理程序添加到捕获阶段。