冒泡和捕获小结

最新推荐文章于 2023-07-13 11:46:30 发布
最新推荐文章于 2023-07-13 11:46:30 发布
阅读量154 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35401191/article/details/83212328
版权

通常我们只考虑一个dom绑定一种事件类型。（碰到一个问题。一个dom分别绑定了冒泡和捕获类型的事件）在一个dom元素同时绑定冒泡和捕获的该怎么处理。

我们来看一下的问题。下面事件的触发顺序是如何的

<body>
    <div class="warpper">
        <div class="context">点我</div>
    </div>
    <script>
        var divw=document.getElementsByClassName('warpper')[0];
        var divc=document.getElementsByClassName('context')[0];
        divw.addEventListener('click',function(){
            console.log('D')
        });
        divc.addEventListener('click',function(){
            console.log('C')
        })
        divc.addEventListener('click',function(){
            console.log('A')
        },true);
        divw.addEventListener('click',function(){
            console.log('B')
        })
        //结果为CADB
        
    </script>
</body>

通过分析：

父级事件没有捕获事件，所以不会优先触发。

当一个子级事件同时有冒泡和捕获的时候（按代码顺序执行）

当子级为捕获，父级为冒泡的时候同样也可以触发父级事件（顺序为子到父）

不难看出以上题的答案是 CADB（由子级触发到父级）

<body>
    <div class="warpper">
        <div class="context">点我</div>
    </div>
    <script>
        var divw=document.getElementsByClassName('warpper')[0];
        var divc=document.getElementsByClassName('context')[0];
        divw.addEventListener('click',function(){
            console.log('D')
        });
        divc.addEventListener('click',function(){
            console.log('C')
        })
        // divc.addEventListener('click',function(){
        //     console.log('A')
        // },true);
        divw.addEventListener('click',function(){
            console.log('B')
        })

        //结果为CDB
        
    </script>
</body>
<body>
    <div class="warpper">
        <div class="context">点我</div>
    </div>
    <script>
        var divw=document.getElementsByClassName('warpper')[0];
        var divc=document.getElementsByClassName('context')[0];
        divw.addEventListener('click',function(){
            console.log('D')
        });
        // divc.addEventListener('click',function(){
        //     console.log('C')
        // })
        divc.addEventListener('click',function(){
            console.log('A')
        },true);
        divw.addEventListener('click',function(){
            console.log('B')
        })

        //结果为ADB
        
    </script>
</body>
<body>
    <div class="warpper">
        <div class="context">点我</div>
    </div>
    <script>
        var divw=document.getElementsByClassName('warpper')[0];
        var divc=document.getElementsByClassName('context')[0];
        // divw.addEventListener('click',function(){
        //     console.log('D')
        // });
        divc.addEventListener('click',function(){
            console.log('C')
        })
        divc.addEventListener('click',function(){
            console.log('A')
        },true);
        // divw.addEventListener('click',function(){
        //     console.log('B')
        // })

        //结果为CA
        
    </script>
</body>

通过以上可以看出。事件都是按代码顺序执行的（切换代码顺序时候也一样，可以自己尝试）

当我们给父级事件冒泡改成捕获时候会优先触发：

<body>
    <div class="warpper">
        <div class="context">点我</div>
    </div>
    <script>
        var divw=document.getElementsByClassName('warpper')[0];
        var divc=document.getElementsByClassName('context')[0];
        divw.addEventListener('click',function(){
            console.log('D')
        });
        divc.addEventListener('click',function(){
            console.log('C')
        })
        divc.addEventListener('click',function(){
            console.log('A')
        },true);
        divw.addEventListener('click',function(){
            console.log('B')
        },true)

        //结果为BCAD
        
    </script>
</body>

小结：

子级的父级（或父级以上）有捕获类型事件优先触发。

都为冒泡（子级为捕获），则按点击的dom元素事件向上传递执行（还有代码的顺序）

很小白的小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
15条JavaScript最佳实践小结
10-27
11. **使用事件委托**：为父元素绑定事件监听器，通过事件冒泡处理子元素的事件，减少事件处理器的数量。 12. **避免内存泄漏**：及时解除事件监听器，释放不再使用的对象引用，以防止内存泄漏。 13. **错误处理**...
冒泡与捕获
WYF857446152的博客
05-25 5392
冒泡事件与捕获事件，以及阻止冒泡事件 阻止默认
事件冒泡和捕获
weixin_58155690的博客
07-17 6070
事件冒泡和捕获
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
weixin_53291256的博客
07-13 4544
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
JS中的事件冒泡和事件捕获
大董的博客
12-13 4850
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。 1、冒泡事件： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触
事件冒泡与事件捕获，以及应用场景
DaftJayee的博客
08-05 4557
什么是冒泡与捕获         以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别输出1234。当我们点击最里面的div时，点击事件开始传递，传递的全过程是1-2-3-4-4-3-2-1。 前半部分，事件从最外面的父div依次传递到最里面的后代div，1-2-3-4这部分我们叫捕获过程。 之后事件又从最里层的后代div逐层传出，4-3-2-1这部分我们叫冒泡过程。 如果我把捕获监听器和冒泡监听器都加上，
JavaScript事件学习小结（一）事件流
10-22
标题中的"JavaScript事件学习小结（一）事件流"指的是JavaScript中的事件处理机制，特别是事件流的概念。事件流描述了在DOM（文档对象模型）中事件如何从根节点传播到具体的元素节点。在JavaScript中，事件是用户与...
北大自考高级语言上机小结
05-05
【标题】：“北大自考高级语言上机小结”...这个“北大考题小结.ppt”文件可以作为复习和准备自考的指南，考生应仔细研究其中的题目和解析，以此来加深对高级语言的理解，提高编程实战能力，从而在考试中取得好成绩。
Vue 开发必须知道的36个技巧(小结)
10-16
20. **错误捕获**：使用try-catch或Vue.config.errorHandler处理运行时错误。 21. **异步组件懒加载**：结合路由，实现按需加载，减少首屏加载时间。 22. **keep-alive**：缓存组件实例，避免再次渲染时销毁组件。...
python课的结课作业.zip
最新发布
06-14
4. **异常处理**：通过编写代码来演示如何使用try/except块来捕获和处理程序运行时可能出现的错误。 5. **数据结构与算法**：可能包含对排序、搜索算法的实现，例如冒泡排序、选择排序、快速排序，以及二分查找等。...
JavaScript 事件冒泡简介及应用
12-10
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。 二、事件冒泡有什么作用 （1）事件冒泡允许多个操作被集中处
利用事件冒泡(Event Bubbling )获取鼠标下的元素属性
05-28
NULL 博文链接：https://ucstudio.iteye.com/blog/618182
深入理解JavaScript的事件冒泡与事件捕获
金鳞踏雨
03-09 4723
JavaScript中提供了很多操作DOM的API。事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。对于这个问题，在实际开发中，并不是非常重要，因为在工作中我们基本上不会直接操作DOM，为了高效一般都是通过Vue、React这些框架，所以关于事件处理程序的一些坑直接就被避免了！！！但是，多了解一点是没有坏处的，毕竟面试会考~
事件冒泡和捕获区别及应用场景
csdn_zhuang的博客
07-23 2343
概念 冒泡 是从指定对象向上冒泡至不确定对象。例如：点击button时，是从button级div不断冒泡至window层。 捕获 是从最外层不确定对象，定位至精确对象过程。 过程图 举个栗子 html部分 <div id="parentId"> 父级 <div id="childId1">子级1</div> <div id="childId2">子级2</div> </div? js部分，注册事件 let parent=do
事件冒泡和事件捕获的区别
热门推荐
weixin_42463235的博客
12-24 1万+
事件冒泡和事件捕获这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 1、事件冒泡 事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。 2、事件捕获 事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。 3、addEventListener方法 element.addEventListener(event, function, ...
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 8774
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
事件冒泡和事件捕获
wanwujintou的博客
09-28 424
事件冒泡和捕获的作用 浏览器的事件冒泡机制和事件捕获机制是一个非常重要的概念,如果您不理解这个概念的话,它会让你感受到真正的痛苦. 事件冒泡和事件捕获是两种完全不同的机制,它们两个的主要作用是: 决定 在一系列相关元素上(祖先和后代这种关系),某一个元素触发一个事件后会导致所有其他的元素上的 同名事件(如果存在的话)也被触发从而调用每个元素上的事件处理函数的 顺序. 是的,在一系列相关元素上(祖先和后代这种关系)的任意一个元素*(除了根元素html)的某个事件的触发都会使其他元素上的同名事件也被触发(如果存
实现先冒泡后捕获
EEstefan的博客
11-14 1713
事件委托 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。 利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。 事件先冒
vue3事件冒泡和捕获
09-15
在 Vue 3 中，事件冒泡和事件捕获与原生 JavaScript 中的事件模型类似。Vue 使用了一种基于组件层级的事件模型来处理事件。 在 Vue 3 中，事件默认使用的是冒泡（bubbling）阶段。当一个子组件触发了一个事件时，该...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值