今天是想要根据我的理解来解释一下什么是浮升(冒泡)和捕获
给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:大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获他(事件)的时候将事件处理程序添加到捕获阶段。