事件捕获与冒泡顺序

最新推荐文章于 2024-07-19 11:40:48 发布
最新推荐文章于 2024-07-19 11:40:48 发布
阅读量446 收藏
点赞数
分类专栏： VUE 文章标签： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beesman/article/details/104125118
版权 
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 
  <style>
	.f1{
		height:360px;
	}
	.f2{
		height:340px;
	}
	.f3{
		height:320px;
	}
	.f4{
		top:50%;
		vertical-align: middle;
		padding-top:50px;
		height:100px;
	}
	div{
		top:50%;
		left:50%;
	}
 </style> 
 </head> 
 <body> 
  <div id="app"> 
   <div @click="log(11)" @click.capture="log(1)" style="background-color:#00f;" class="f1"> 
    <div @click="log(21)" @click.capture="log(2)" style="background-color:#66f;" class="f2"> 
     <div @click.stop="log(31)" @click.capture="log(3)" style="background-color:#ccf;" class="f3"> 
      <a @click="log(41)" @click.capture="log(4)" href="javascript:console.log('x');" style="background-color:#f1f;" class="f4">
        点我 
      </a> 
     </div> 
    </div> 
   </div> 
  </div>  
  <script>

new Vue({
  el: '#app',
  methods:{
	  log:function(msg){
		  console.log(msg);
	  }
  }
})
</script>  
</body>
</html>

 

 

到达事件源后执行事件源，

 

解释效果
事件捕获是由外而内的，目标事件是在自身触发的（目标事件过程，与事件声绑定顺序有关，先绑定先发生，它不遵守先捕获后冒泡），事件冒泡是由内而外的。
关键点

beesman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件冒泡和事件捕获详解
qq_42040061的博客
11-20 501
事件冒泡 事件冒泡：DOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡。事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素。 翻译：党DOM元素发生一些事件（例如点击 click），可以向父级传递，由最内层传递到最外层，直到他们的根元素(即document)。 在这里插入代码片 ...
事件冒泡与事件捕获
01-20
**事件捕获** 则是另一种事件传播模式，与冒泡相反。它从DOM树的根节点开始，向下遍历到事件实际发生的地方。也就是说，事件首先由最外层元素处理，然后逐步传递给其子元素，直至到达目标元素。事件捕获的目标是为了...
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
01-19
俗话说的好，好记性不如个烂笔头，这么多技术文章如果不去吃透，技术点很快就容易忘掉，下面是小编平时浏览的技术文章，整理的笔记，分享给大家。 开发过程中我们都希望使用别人成熟的框架，因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过，我们也应该、必须了解其基本原理。比如DOM事件，jquery框架帮我们为我们封装和抽象了各浏览器的差异行为，为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化，我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心，浏览器才会走得更远。正如我们现在使用低版本浏览器打开某些页面时，会告知我们要用chrome等高级浏览器访问。不过这是一个革命的过
js中事件冒泡和事件捕获顺序
qq_35129986的博客
04-02 730
当画面元素同时绑定冒泡和捕获事件时，执行顺序是：外层捕获事件，元素绑定顺序决定元素冒泡还是捕获，外层冒泡如下：     &lt;div class='container'&gt; &lt;div class='wapper'&gt; &lt;div class='context'&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; divcon...
【JavaScript】 事件捕获、事件冒泡和事件委托顺序
最新发布
DX390609的博客
07-19 172
综上所述，事件捕获阶段先发生，然后是事件的目标阶段，最后是事件冒泡阶段。事件委托是一种利用事件冒泡的机制，通过将事件处理程序绑定到目标元素的父元素（或更高层次的祖先元素），来管理事件。事件从文档根节点（document）开始向下传播，直到达到事件的实际目标（即触发事件的元素）。事件捕获、事件冒泡和事件委托是指在浏览器中处理DOM事件时的不同阶段和机制。当目标元素触发事件时，事件会冒泡到父元素，由父元素上的事件处理程序进行处理。事件在目标元素上被触发和捕获，这是事件的目标阶段。
如何让事件先冒泡后捕获
Sugarman0620的博客
09-18 2290
在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一事件，监听捕获和冒泡，分别对应响应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。 转载于:https://www.cnblogs.com/psxiao/p/11540263.html...
事件冒泡和事件捕获的顺序
roongyan92的博客
08-01 832
给同一个元素注册点击事件，测试事件冒泡和事件捕获的顺序，代码如下： <div class='container'> <div class='wapper'> <div class='context'> 点击你试试 </div> </div> </div> <script> ...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
例如，在提供的代码示例中，当点击id3元素时，事件首先在捕获阶段执行obj2和obj3绑定的函数，然后在冒泡阶段执行obj1绑定的函数，因此显示顺序为id2、id3、id1。 `addEventListener`方法用于添加事件监听器，它接收...
js基础之事件捕获与冒泡原理
10-16
相对地，事件冒泡模型则由微软提出，它的顺序与事件捕获相反。在事件冒泡中，当在 p 元素上发生点击事件时，事件会首先在 p 元素上触发，然后传递到其父级 div，最后到达最外层的 body 元素。因此，在事件冒泡的阶段...
js事件冒泡与事件捕获详解
10-20
第二部分则是详细解释了事件捕获与事件冒泡的区别和执行顺序。以一个嵌套的`<div>`结构为例，当点击最内层的`<div>`时，事件捕获的过程是首先从外层元素开始，逐渐传到目标元素，即`A→B→C`。而事件冒泡则相反，...
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
01-08
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时，事件就发生了。 事件从触发到完成响应一般分为三个阶段：捕获阶段，目标阶段、冒泡阶段。 事件流 页面中接受事件的顺序，也就是事件响应的顺序。大部分浏览器默认都是用IE的“事件冒泡”顺序（从里层向外层）；而网景采用“事件捕获”顺序（从外层向里层）。使用冒泡流可以兼容更多的浏览器（IE6，7，8均只支持冒泡流）。事件流原理图如下： 看图： 1、（1-5）为捕获流（外向里）
html5冒泡事件,【前端】事件冒泡与事件捕获的先后问题？
weixin_39630440的博客
06-07 224
我看资料上说现代浏览器对于事件冒泡与事件捕获都是支持的。我写了如下代码：var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");var btn = document.getElementById("btn1");div1.addEventListener("click",functi...
事件：事件流、事件对象、事件委托、如何先冒泡后捕获
mkbird的博客
05-03 437
文章目录事件事件流事件对象事件委托（代理、委派） 事件 事件流 事件流描述的是页面接收事件的顺序（比如点击） 可以理解为向水底扔了石头，石头向下为捕获阶段，向上冒泡为冒泡阶段，同理鼠标点击后DOM先向下捕获这次点击事前，捕获后再向上冒泡，中间经过的对应事件处理函数都会被触发 实际开发过程都用冒泡，即没有参数 有些事件没有冒泡，如onblur，onfocus，onmouseenter，onmouseleave 事件冒泡有时会带来麻烦，比如给son和father添加点击事件，点击son，会先弹出son，再弹
前端系列第2集-如何让事件先冒泡后获取?
程序员哆啦A梦，蓝胖子
03-25 242
事件冒泡是指当一个元素上的事件被触发后，该事件会从该元素开始向上冒泡，直到传播到文档对象，并且可以被其他元素捕获。默认情况下，事件是先捕获后冒泡。如果希望事件先冒泡后获取，可以使用以下两种方法之一：使用事件委托（Event Delegation）事件委托是一种通过在其父元素上监听事件并利用事件冒泡来处理其子元素上的事件的技术。例如，如果有一个包含多个按钮的列表，并且希望在单击每个按钮时执行相同的操...
实现先冒泡后捕获
EEstefan的博客
11-14 1731
事件委托 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。 利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。 事件先冒
js事件冒泡和事件捕获详解
aiguke3395的博客
03-25 268
Javascript与HTML之间的交互是通过事件实现。 一、事件流 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE9，chrome，Firefox，Opera，Safari均实现了DOM2级规范中定义的标准DOM事件，而IE8和IE8以下版本仍然保留专有的事件处理方式。 事件冒泡 事件冒泡是由IE开发团队提出来的，即事件开始时由最...
关于事件捕获和事件冒泡的顺序，以及如何处理事件冒泡带来的影响
qq_56889810的博客
10-11 929
以下为大家介绍关于事件捕获和事件冒泡的顺序 首先，给大家梳理以下关于addEventListener第三个值 true，或false的讲解 true或者不填写，代表是事件捕获阶段 事件捕获，是从document->html-body->.....->点击的一个处理目标,例如此文中的<div id='l4'></div>。换句话说，就是从最大范围到你点击处理事件的最小范围 。 填写false，则代表是事件冒泡阶段 从点击处理事件到documen...
事件冒泡和捕获的执行顺序
weixin_30236595的博客
05-07 148
w3c规定了，任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。绑定在被点击元素的事件是按照代码的顺序发生的。 冒泡，它就像鱼儿吐泡泡一样，从下到上。 从祖先元素开始慢慢找，最后找到我们的点击目标，这个行为不就像警察叔叔抓坏人一样，逐渐的缩小抓捕范围，最后确定到某一个人身上，所以这个叫做捕获。 https://blog.csdn.net/moguzhale...
JavaScript事件冒泡与捕获深度解析
- 捕获与冒泡相反，事件首先由最不具体的节点（通常是document对象）处理，然后向下传播到最具体的节点。在上面的例子中，如果使用捕获，`element1`的事件处理函数会在`element2`之前执行。 - 捕获模式有时用于在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值