JS中的浮升和捕获

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

如下图：

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

1、是简单的DOM level0 的监听，比如：div1.onclick=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：大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获他（事件）的时候将事件处理程序添加到捕获阶段。