javascrpit 事件捕获和事件冒泡

最新推荐文章于 2024-04-17 11:31:34 发布
最新推荐文章于 2024-04-17 11:31:34 发布
阅读量692 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 事件捕获 事件冒泡 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/79855972
版权

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

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

        
< script >
function say (){
console . log ( "别点了，受不了了！" );
}
window. addEventListener ( "click" , say ，false );
< / script >


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

事件流程的简单描述：

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


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

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

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

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

              

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

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

              

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

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

                                       

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

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


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

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

        效果图：

       


    代码实现：

<!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 >
</ div >
</ 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 >
</ div >
</ 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，那么就是捕获行为；

cvper
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件冒泡和事件捕获
LW0512的博客
10-03 217
事件冒泡和事件捕获 事件有三个阶段:      1.事件捕获阶段 :从外向内      2.事件目标阶段 :最开始选择的那个      3.事件冒泡阶段 : 从里向外 事件冒泡 多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了 从里到外 事件捕获:从外往里. 绑定事件: addEventListener(事件类型,事件
关于事件冒泡和事件捕获
BIGDgreen
01-31 764
这里写自定义目录标题什么是事件事件流事件冒泡和事件捕获的概念事件冒泡事件捕获事件冒泡示例事件捕获示例阻止冒泡方法一方法二（jQuery，同时会阻止默认事件） 什么是事件 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互就是通过事件实现的。可以用侦听器或处理程序来预定事件，以便事件发生时执行相应的代码。 事件流 事件流描述的是从页面接收事件的顺序。 为什...
事件冒泡和捕获
weixin_58155690的博客
07-17 6076
事件冒泡和捕获
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
weixin_53291256的博客
07-13 4580
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
js 事件模型 事件捕获、事件冒泡
最新发布
weixin_54714100的博客
04-17 1032
什么是事件捕获、事件冒泡 事件冒泡（event bubbling）和事件捕获（event capturing）是指在 DOM 树中处理事件的两种不同方式。
事件流---事件冒泡和事件捕获
AAAXEC的博客
11-04 361
所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，可以理解为一条鱼在水中吐泡，而这个泡是从水里向水面传送，里到外。事件流呢：在事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定顺序进行传播，这个过程称为事件流。DOM对象.addEventListener(事件，事件处理程序，事件冒泡方式)。在使用"事件监听"的方式绑定事件时，可以设置事件的响应方式。（1）事件委托：将元素的绑定事件写起其父元素上，防止事件冒泡。首先我们了解一下什么叫做事件流。
理解事件捕获和事件冒泡
Hey firefly
04-03 6227
参考资料浅谈事件冒泡与事件捕获 一年前刚开始接触JavaScript的时候就看过有关事件冒泡和事件捕获的文章，但是当时只是看过了就是看过了，没有自己实际的实践，并没有什么自己的理解在里面，属于转眼就忘的那种状态，这段时间由于参加百度的ife前端培训，做到js方面的任务时，决定仔细的学习一下时间捕获和事件冒泡，所以就有了今天这篇文章。 ps：其实前两天就想写了，但无奈图书馆的网一直连不上，只好推到
解释什么是事件冒泡和事件捕获。
Layla_c的博客
03-17 1197
与事件捕获相反，事件冒泡是从目标元素开始，然后逐级向上冒泡到最外层容器的过程。也就是说，首先触发目标元素上的事件处理器，然后依次触发其父元素、祖父元素等上的事件处理器，最后到达最外层的容器。需要注意的是，虽然事件冒泡和事件捕获是两个不同的阶段，但在一个事件处理过程中，这两个阶段都会发生，只是默认情况下事件处理器只在冒泡阶段被触发。事件冒泡和事件捕获是JavaScript中事件流（Event Flow）的两个主要阶段，用于描述当一个事件发生时，事件处理器（或事件监听器）如何被触发和执行的顺序。
boomjs:一个 javascrpit 加载器和管理器
06-20
一个 javascript 加载器和管理器 词汇表 CLOSUSRE-MODULE - 它是由 Boom.add 方法创建的闭包隔离的一段代码。 语法与 YUI 几乎相同： Boom.add('closure-module-name', function(instance) { // define module ...
javascrpit
04-08
在网页中，JavaScript 主要用于处理用户事件（如点击按钮）、操纵DOM（文档对象模型）以改变网页内容、执行AJAX（异步JavaScript和XML）请求以实现页面的无刷新更新，以及创建复杂的网页动画效果。随着HTML5的出现，...
ExtJsPractic javascrpit
03-01
javascript、js、Extjs、Web脚本、Mvc
javascrpit算法
04-01
javascrpit算法
javaScrpit笔记1
08-08
取消事件冒泡可以通过在事件处理函数中使用`event.stopPropagation()`，防止事件向父级元素传播。阻止默认行为可以使用`return false`或`event.preventDefault()`。 Ajax（Asynchronous JavaScript and XML）用于...
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 8796
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
深入理解JavaScript的事件冒泡与事件捕获
金鳞踏雨
03-09 4728
JavaScript中提供了很多操作DOM的API。事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。对于这个问题，在实际开发中，并不是非常重要，因为在工作中我们基本上不会直接操作DOM，为了高效一般都是通过Vue、React这些框架，所以关于事件处理程序的一些坑直接就被避免了！！！但是，多了解一点是没有坏处的，毕竟面试会考~
js事件（事件冒泡与事件捕获）
weixin_30381317的博客
01-22 198
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 <div id='aa' click='po'> <p id='bb' click='on'>点击</p> </div> 　　上面两个点击事件如果点击的时候，到底谁会被先触发呢，为了解决这个问题微软和网景提出了两...
关于事件冒泡、事件捕获和事件委托
weixin_69356624的博客
05-08 2826
前置知识 事件流 在第四代Web浏览器（IE4 和 Netscape Communicator4 ）开始开发时，开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？ 两家浏览器的开发团队都是以同样的方式看待浏览器事件的。当你点击一个按钮的时候，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。 事件流描述了页面接收事件的顺序。结果非常有意思， IE 和 Netscape 开发团队提出了几乎完全相反的事件流方案。IE将支持 事件冒泡 流 ， 而 Netscape Communicator 将支
事件冒泡和事件捕获的区别
热门推荐
weixin_42463235的博客
12-24 1万+
事件冒泡和事件捕获这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 1、事件冒泡 事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。 2、事件捕获 事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。 3、addEventListener方法 element.addEventListener(event, function, ...
html和javascrpit
05-28
它可以在网页上创建动态内容、响应用户事件、验证表单、控制样式等等。JavaScript 还可以与后端服务器进行通信，从而实现更高级的功能。 HTML 和 JavaScript 通常一起使用，以创建动态、交互式的网站。HTML 负责...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值