js事件冒泡、捕获的理解（结合vue）

最新推荐文章于 2024-08-15 19:36:37 发布
最新推荐文章于 2024-08-15 19:36:37 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chang_li/article/details/78543227
版权

事件冒泡与事件捕获

页面上的元素添加一个绑定事件，绑定事件方法的第三个参数（布尔类型，默认false事件冒泡），就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jquery.min.js"></script>
</head>
<body>
<div id="parent">
    <div id="child" class="child">demoDiv</div>
</div>
</body>
<script>
    document.getElementById("parent").addEventListener("click", function (e) {
        alert("parent事件被触发，" + this.id);
    }, true)
    document.getElementById("child").addEventListener("click", function (e) {
        alert("child事件被触发，" + this.id)
    }, true)
</script>
</html>
第三个参数都设置为true，事件捕获。以上示例阻止冒泡可以通过在alert后面添加一行代码实现 

e.stopPropagation();

事件冒泡结合vue.js

@click.stop阻止冒泡 

<script src="vue.js"></script>
<script>
	 window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                },
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });
        };
</script>

<div id="box">
        <div @click="show2()">
            <input type="button" value="按钮" @click.stop="show()">
        </div>
</div>

参考：彻底弄懂JS的事件冒泡和事件捕获

解析Javascript事件冒泡机制


chang_hf
关注
专栏目录
事件委托、事件捕获与冒泡(js、vue、react)
Darlingmi的博客
02-19 1846
原生js，vue，react中的事件冒泡与捕获，事件委托~~~
2021-07-29 vue事件冒泡和事件捕获,阻止冒泡和阻止浏览器默认行为
GAARA
07-29 2083
文章目录0.概要1.事件冒泡和事件捕获1.1.事件冒泡例子1.2.事件捕获例子2.阻止冒泡和阻止默认行为例子 0.概要 1.阻止冒泡:@click.stop=‘fn’ 2.阻止浏览器的默认行为:@click.prevent=‘fn’ 3.事件捕获:@click.capture=‘fn’ 1.事件冒泡和事件捕获 1.1.事件冒泡例子 html: <div id="app"> <div id="car" @click="type('车')"> <div id="benzcar
写出对js事件，事件流，事件对象的理解
qq_42686961的博客
07-16 1164
事件: JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。 事件流: 一个完整的JS事件流是从window开始，最后回到window的一个过程 事件流主要分为两种，即事件捕获和事件冒泡，这二者接...
Vue中事件冒泡与事件捕获的区别
南风花海的博客
10-25 555
如果点击了最内侧的outC，那么外侧的outB和outC算不算被点击了呢？ 很显然算，不然就没有必要区分事件冒泡和事件捕获了，这一点各个浏览器厂家也没有什么疑义。 假如outA、outB、outC都注册了click类型事件处理函数，当点击outC的时候，触发顺序是A-->B-->C，还是C-->B-->A呢？如果浏览器采用的是事件冒泡，那么触发顺序是C-->B-->A，由内而外，像气泡一样，从水底浮向水面；如果采用的是事件捕获，那么触发顺序是A-->B--&gt
阻止事件冒泡和事件捕获的方法及vue事件修饰符的使用
最新发布
SSophia的博客
08-15 1276
通过使用event.stopPropagation()方法，可以阻止事件传播（事件冒泡和事件捕获），通过event.preventDefault()方法，可以阻止事件的默认行为。
事件冒泡和事件捕获理解
A_NuoDaDa的博客
10-02 1022
问题： 什么是DOM事件流？事件流的三个阶段？什么是事件冒泡和事件捕获？事件冒泡和事件捕获怎么实现？事件冒泡和事件捕获的应用？   一、什么是DOM事件流？ DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在I...
事件流：事件冒泡和事件捕获的理解
邢_heng
09-19 2032
两者概念 事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。， element.addEventListener(event,function(),false); 事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。 element.addEventListener(event,function(),true); ...
Vue事件捕获和事件冒泡
weixin_43465508的博客
06-26 2132
当一个HTML元素产生一个事件时该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流什么是事件捕获？(网景)事件捕获：事件捕获会从document开始触发一级一级往下传递,依次触发,直到真正事件目标为止事件捕获顺序举例 ：document→ html→ body→ div→ button什么是事件冒泡？（微软）事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止。
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
`.stop`修饰符是Vue事件修饰符之一，它们允许我们在事件处理中进行更精细的控制。其他常见的修饰符包括： - `.prevent`：阻止默认行为，如表单提交。 - `.capture`：在事件冒泡阶段捕获事件，而不是在其冒泡到目标...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
在Vue.js框架中，事件处理是一个关键特性，它允许开发者响应用户交互并执行相应的逻辑。然而，有时在实际开发过程中可能会遇到一些问题，比如在使用`v-for`指令动态渲染列表时，事件绑定可能无法正常工作，特别是...
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
10-17
Vue.js，作为目前流行的前端JavaScript框架，提供了一套优雅的事件处理机制。本文将详细介绍Vue中的事件简写、事件对象、事件冒泡、默认行为以及键盘事件，并结合实例来分析这些事件的用法。 首先，让我们来了解Vue...
解释什么是事件冒泡和事件捕获。
Layla_c的博客
03-17 1294
与事件捕获相反，事件冒泡是从目标元素开始，然后逐级向上冒泡到最外层容器的过程。也就是说，首先触发目标元素上的事件处理器，然后依次触发其父元素、祖父元素等上的事件处理器，最后到达最外层的容器。需要注意的是，虽然事件冒泡和事件捕获是两个不同的阶段，但在一个事件处理过程中，这两个阶段都会发生，只是默认情况下事件处理器只在冒泡阶段被触发。事件冒泡和事件捕获是JavaScript中事件流（Event Flow）的两个主要阶段，用于描述当一个事件发生时，事件处理器（或事件监听器）如何被触发和执行的顺序。
vue：事件冒泡，事件捕获
weibaobao1314的博客
08-17 2295
vue：事件冒泡，事件捕获 冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件 事件冒泡是从里向外依次触发父级节点上事件的过程 我们需要做的事阻止事件冒泡 原生的阻止事件冒泡： event.stopPropagation() vue阻止事件冒泡 @@事件名.stop=“方法名” 事件捕获 是通过添加事件监听的方式来捕获父级节点上的同名事件，事件触发的方式是从外向 里的 原生： var box=document.getElementById("box") var but=d
Vue 事件、事件冒泡和事件捕获
江西第一深情的博客
11-13 3775
vue 事件、事件冒泡、事件捕获和终止事件冒泡
事件冒泡和时间捕获
kk的博客
01-24 1165
事件捕获和冒泡
在Vue中，关于事件冒泡
热门推荐
罗忠浩的博客
03-24 1万+
在项目中或多或少都会遇见关于事件冒泡的问题。 什么是事件冒泡： 对于父元素的事件，你的子元素也会触发，可以理解为父债子还。 对于我们而言，经常会有不想让某个子元素去触发父元素的事件，也就是说，上一辈欠的钱，别来找我要。 这个时候我们就需要来阻止事件冒泡了。 一般情况我们这样来实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
事件捕获和事件冒泡有什么区别
哼哼哼哼哼
04-21 1296
例如，当用户点击一个按钮时，该按钮的点击事件会被触发，但在触发该按钮的点击事件之前，事件会先从文档根节点开始向下捕获，可能触发该按钮的祖先元素、父元素的点击事件。当用户点击按钮时，事件会先在子元素上触发，然后事件会向上冒泡到父元素，最终触发父元素的点击事件处理函数。事件冒泡是指当一个元素上的事件被触发后，该事件会从该元素开始向上冒泡，依次触发父元素的相同事件，直到冒泡到文档根节点为止。例如，当用户点击一个按钮时，该按钮的点击事件会被触发，然后该事件会向上冒泡，可能触发该按钮的父元素、祖先元素的点击事件。
vue跟jQuery中的事件冒泡、事件捕获、事件委托（事件代理）
weixin_45392204的博客
04-29 1613
鼠标点击或者触发了dom事件，浏览器会从根节点（Document 对象）流向目标元素，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标元素。在捕获完成后，与事件捕获相反，事件会从目标元素流向文档根节点，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。在网页中，有时我们需要动态增加或移除页面中的元素，使用事件委托不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。一直向下到目标元素后，从目标元素开始向上执行冒泡元素。
Vue中的事件冒泡和捕获
weixin_42555713的博客
09-18 6937
Vue中的事件冒泡和捕获 stop 阻止冒泡事件 .capture 设置捕获事件 .self 只有点击当前元素的时候，才会触发处理函数 .once处理函数只被触发一次 1.当一个父元素div1 包裹着一个子元素div2 同时有点击事件， 我们点击子元素，不想触发父元素的事件，我们可以采用阻止事件冒泡解决 @click.stop 2设置捕获事件. 当一个父元素div1 包裹着一个子元素div2 同时有点击事件。 我们希望点击从外面执行到里面，先触发父元素再触发子元素。 我们可以在父元素的点击事件加上 @c
vue3事件冒泡和捕获
09-15
在 Vue 3 中，事件冒泡和事件捕获与原生 JavaScript 中的事件模型类似。Vue 使用了一种基于组件层级的事件模型来处理事件。 在 Vue 3 中，事件默认使用的是冒泡（bubbling）阶段。当一个子组件触发了一个事件时，该事件会沿着组件层级向上冒泡到父组件，直到根组件。父组件可以通过在模板中使用 `@` 或 `v-on:` 绑定事件监听器来捕获并处理这个事件。 例如，假设我们有一个父组件 `<Parent>` 和一个子组件 `<Child>`。在子组件中触发一个自定义事件 `myEvent`： ```vue <Child @myEvent="handleEvent"> <!-- 子组件的内容 --> </Child> ``` 父组件可以通过在模板中绑定一个方法来捕获并处理该事件： ```vue <Parent> <template v-slot:myEvent="eventData"> <!-- 处理 myEvent 事件 --> </template> </Parent> ``` 需要注意的是，在 Vue 3 中，默认情况下没有提供事件捕获阶段的支持。如果需要使用事件捕获，可以使用原生 JavaScript 中的 `addEventListener` 方法来手动添加事件监听器，并通过设置 `capture` 参数为 `true` 来启用捕获阶段。 希望能帮助到你！如果有任何疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值