javascrpit 事件捕获和事件冒泡

小鱼儿 2022-05-27 00:39 247阅读 0赞

事件捕获和事件冒泡涉及到了事件的流程，我们先来看一个例子：

一、 添加事件监听：给  window 添加点击的监听事件，输出 “别点了，受不了了“    ![偷笑][titter.gif]

< script >

**function**  say ()\{

console . log ( "别点了，受不了了！" );

window. addEventListener ( "click" ,  say ，false );

< / script >

二、上面我们已经知道如何添加监听，下面看一个例子，然后分析事件的流程：

事件流程的简单描述：

当我们给一个元素添加监听的时候，例如点击事件；

首先这个事件进入的是捕获阶段，也就是从外层向内层探索，例如下面的三个div嵌套的例子，

先找到到一个div，然后查看有没有绑定的事件，如果有，那么就执行相应的处理函数，如果

没有相应的事件或者事件执行完成，那么继续向里面的第二个div探索，如果第二个div有绑定

的事件，那么执行，如果没有，或者事件执行完成，继续向第三个div探索；

目标阶段，假设我们点击的是第三个div，那么到达这个div然后执行相应的处理就是我们本来

应该做的事情， 也就是我们的目标；

冒泡阶段，假设我们的目标阶段执行完成，那么从第三个div依次到达第一个div，就是冒泡阶段，

这个阶段, 所做的事情就是和捕获阶段相反的，如图所示；

![70][]

当然了，默认情况下，我们嵌套的三个div执行的是冒泡事件，当然了，我们也可以设置是表现为

捕获行为还是冒泡行为，下面通过代码实例来说明；

默认情况下是冒泡行为，我们先来看冒泡：

我们定义三个嵌套的div，然后分别给每个div设置 click 监听，分别弹出不同的内容；

效果图：

![70 1][]

代码实现：

<!DOCTYPE html>

< html>

< head>

< meta charset= "utf-8" >

< meta name= "newbean" />

< title > 事件捕获和事件冒泡 </ title >

< style  type = "text/css" >

\#a \{  width : 400 px ;  height : 400 px ;  background-color : \#ccc ;  padding : 50 px ;\}

\#b \{  width : 200 px ;  height : 200 px ;  background-color :pink;  padding : 50 px ;\}

\#c \{  width : 80 px ;  height : 80 px ;  background-color :greenyellow; padding : 50 px ;\}

< / style >

</ head>

< body>

< div id= "a" >我是第一个

< div id= "b" >我是第二个

< div id= "c" >

我是第三个

</ div >

< script >

**var**  a = document. getElementById ( "a" );

**var**  b = document. getElementById ( "b" );

**var**  c = document. getElementById ( "c" );

a . addEventListener ( "click" , **function** ()\{

alert ( "我是第一个" );

\});

b . addEventListener ( "click" , **function** ()\{

alert ( "我是第二个" );

\});

c . addEventListener ( "click" , **function** ()\{

alert ( "我是第三个" );

\});

< / script >

</ body>

</ html>

结果：当我们点击第一个div时，弹出  “ 我是第一个 ”；

当我们点击第二个div时，先弹出“我是第二个”，再弹出“我是第一个”；

当我们点击第三个div时，先弹出 “我是第三个”，再弹出我是“第二个”，最后弹出“我是第一个”；

这个就是典型的时间冒泡；

我们再来看看捕获：

代码：

<!DOCTYPE html>

< html>

< head>

< meta charset= "utf-8" >

< meta name= "newbean" />

< title > 事件捕获和事件冒泡 </ title >

< style  type = "text/css" >

\#a \{  width : 400 px ;  height : 400 px ;  background-color : \#ccc ;  padding : 50 px ;\}

\#b \{  width : 200 px ;  height : 200 px ;  background-color :pink;  padding : 50 px ;\}

\#c \{  width : 80 px ;  height : 80 px ;  background-color :greenyellow; padding : 50 px ;\}

< / style >

</ head>

< body>

< div id= "a" >我是第一个

< div id= "b" >我是第二个

< div id= "c" >

我是第三个

</ div >

< script >

**var**  a = document. getElementById ( "a" );

**var**  b = document. getElementById ( "b" );

**var**  c = document. getElementById ( "c" );

a . addEventListener ( "click" , **function** ()\{

alert ( "我是第一个" );

\}, true );

b . addEventListener ( "click" , **function** ()\{

alert ( "我是第二个" );

\}, true );

c . addEventListener ( "click" , **function** ()\{

alert ( "我是第三个" );

\}, true );

< / script >

</ body>

</ html>

结果：当我们点击第一个div时，弹出  “ 我是第一个 ”；

当我们点击第二个div时，先弹出“我是第一个”，再弹出“我是第二个”；

当我们点击第三个div时，先弹出 “我是第一个”，再弹出我是“第二个”，最后弹出“我是第三个”；

这个就是捕获行为；

和冒泡的区别就是我们加了一个参数：

obj.addEventListener("click",function,true);

这里的第三个参数如果不写，那么就是默认的冒泡行为；如果写上false，那么还是冒泡行为；

但是如果写上true，那么就是捕获行为；

[titter.gif]: https://static-blog.csdn.net/xheditor/xheditor_emot/default/titter.gif
[70]: /images/20220527/c028e415425442beb3377727c41958df.png
[70 1]: /images/20220527/170ad7530bca4a2daa36ae2c0e507a50.png

javascrpit 事件捕获和事件冒泡

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关事件冒泡和事件捕获以及事件委托

相关事件流----事件冒泡事件捕获

相关理解事件捕获和事件冒泡

相关 javascrpit 事件捕获和事件冒泡

相关 js 事件冒泡和事件捕获

相关事件冒泡或事件捕获？

相关事件捕获与事件冒泡

相关捕获事件与冒泡事件

相关事件冒泡捕获

相关 JS事件捕获和事件冒泡