javascript：事件冒泡

最新推荐文章于 2024-07-30 22:36:34 发布
最新推荐文章于 2024-07-30 22:36:34 发布
阅读量53 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46412415/article/details/105184221
版权

事件执行的过程，3个过程：捕获阶段(在找目标元素)、目标阶段(找到目标元素并执行他的事件)、冒泡阶段(离开目标)
在一个事件中，当他完成了目标元素事件后，其他元素的事件默认会在冒泡阶段执行

<body>
    <div class="big">
        <div class="middle">
            <div class="small"></div>
        </div>
    </div>
</body>
<script type="text/javascript">

    document.querySelector(".big").onclick = function () {
        console.log("大的");
    }
    document.querySelector(".middle").onclick = function () {
        console.log("中等的");
    }
    document.querySelector(".small").onclick = function () {
        console.log("小的");
    }


</script>

输出结果：

小的

中等的

大的

盒子发生嵌套，点击了小盒子，也会触发大盒子的事件
大盒子的事件在执行的时候，在冒泡阶段执行

如何阻止事件冒泡：

使用事件对象的一个方法 stopPropagation()
e.stopPropagation()放在目标元素里面，就能阻止目标阶段以后的冒泡

<body>
    <div class="big">
        <div class="middle">
            <div class="small"></div>
        </div>
    </div>
</body>
<script type="text/javascript">

    document.querySelector(".big").onclick = function () {
        console.log("大的");
    }
    document.querySelector(".middle").onclick = function () {
        console.log("中等的");
    }
    document.querySelector(".small").onclick=function(e){
    var e = e || window.event;
    
    e.stopPropagation();

    console.log("小的");
    }

</script>

输出结果：

小的

stopPropagation()有兼容性问题
ie中的写法：
e.cancelBubble = true;

<body>
    <div class="big">
        <div class="middle">
            <div class="small"></div>
        </div>
    </div>
</body>
<script type="text/javascript">

    document.querySelector(".big").onclick = function () {
        console.log("大的");
    }
    document.querySelector(".middle").onclick = function () {
        console.log("中等的");
    }
    document.querySelector(".small").onclick=function(e){
    var e = e || window.event;
    
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    console.log("小的");
    }

</script>

输出结果：

小的

guaaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解javascript事件冒泡
10-23
主要向大家介绍了javascript事件冒泡，以及javascript阻止事件冒泡的实现代码，感兴趣的朋友可以参考一下
javascript事件冒泡简单示例
10-22
JavaScript提供了两种方式来阻止事件冒泡： 1. 使用非标准的`event.cancelBubble = true;`，这在IE浏览器中有效。 2. 使用标准的`event.stopPropagation();`，这在大多数现代浏览器中支持。 在上述代码中，两个`...
javascript:事件冒泡
u014081297的专栏
04-15 517
1、子元素onclik事件，外层div也将获取onclick
Javascript的事件冒泡
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
JavaScript事件的冒泡
haojieji的博客
08-23 420
事件的委派：事件统一绑定共同祖先，当后代元素事件触发，会一直冒泡到祖先，通过祖先元素的响应函数处理。
11 JavaScript学习：事件
热门推荐
百锦再的博客
04-23 7万+
事件是指用户在页面上执行的动作（如点击按钮、鼠标移动、键盘输入等）或者浏览器本身触发的动作（如页面加载完成、窗口尺寸改变等）。JavaScript 可以通过事件监听器来捕获这些事件，并对其做出相应的处理，从而实现页面的动态交互效果。这些是一些常见的 HTML 事件，还有许多其他事件可以用于不同的交互行为。通过事件属性和相应的 JavaScript 函数，可以实现丰富的用户交互功能。通过监听用户的操作并进行合适的响应，可以提升用户体验并实现更多交互功能。
React小笔记：事件冒泡问题
qq_45977489的博客
11-14 923
具体详情可以自行去Chrome或stackOverflow上自行了解。react冒泡事件导致父元素也跟着触发。
JavaScript 事件冒泡
LiLi_code的博客
01-16 316
事件冒泡：子元素的onclick事件 触发完会传导到父元素的onclick事件去 一、用以下例子演示：其中 &lt;li&gt; 是 &lt;a&gt; 的子元素 &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
JavaScript 怎么处理事件冒泡？
努力是为了站在万人之中，成为别人的光
06-25 1万+
在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。事件冒泡是JavaScript中常见的事件传播机制。通过事件冒泡，可以让嵌套的元素接收到父元素触发的事件。在处理事件冒泡时，可以采用停止事件冒泡和使用事件委托两种方式。停止事件冒泡可以阻止事件继续向父元素传播，而事件委托利用事件冒泡的特性，将事件处理委托给父元素来管理，提高性能和代码的可维护性。
JavaScript中的事件委托与事件冒泡
xiaban_的博客
04-27 1893
JavaScript中的事件委托与事件冒泡，以及常用的event的属性，其中主要详细讲了event.target
JavaScript：DOM事件
盒马的博客
12-24 1482
讲解JavaScript中的事件，包括事件监听，事件冒泡，事件委托等技巧
20分钟搞懂JavaScript事件冒泡：事件冒泡原理，事件委托（即事件冒泡的利用），以及阻止事件冒泡
weixin_44552302的博客
05-09 569
事件冒泡 事件的三个阶段：捕获，执行当前，冒泡 三个阶段只有两个会同时进行，即捕获+当前，或者当前+冒泡 注意：不是所有的事件都会冒泡，focus，load，unload等就不会冒泡 三种添加事件方式都默认是冒泡，其中addEventListener第三个参数设置为true时，事件会变为捕获 事件委托（事件冒泡的利用） 运用场景：多个子元素触发同一类型的事件 原理：利用冒泡，把事件添加在父元素上，然后用事件对象的target属性确定是哪一个子元素触发的。 eg：tab选项卡 <style&
JavaScript阻止事件冒泡示例分享
10-24
在JavaScript中，有多种方法可以实现阻止事件冒泡： 1. 使用`event.stopPropagation()`方法：这是W3C标准的方法，适用于Firefox、Chrome、Safari、Opera等非IE浏览器。调用此方法后，事件将不会继续向上冒泡，事件...
JavaScript 事件冒泡应用实例分析
10-29
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。
javascript事件冒泡实例分析
10-24
主要介绍了javascript事件冒泡实原理,实例分析了事件冒泡的定义及实现技巧,需要的朋友可以参考下
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 897
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 223
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 289
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【Vue3】自定义组件
最新发布
又言又语
07-30 441
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
jQuery基础教程：事件冒泡与动画效果
"事件冒泡在编程中是一个重要的概念，特别是在使用jQuery进行前端开发时。事件冒泡是指在DOM（文档对象模型）层次结构中，事件（如点击、鼠标移动等）从最深的节点开始，逐级向其父节点传递。这个过程就像水泡从底部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值