前端.什么是冒泡和阻止冒泡的原因和方法

最新推荐文章于 2022-12-07 20:32:59 发布

请叫我院士

最新推荐文章于 2022-12-07 20:32:59 发布

阅读量1w

点赞数 18

分类专栏：前端文章标签： html 前端 Js 冒泡

本文链接：https://blog.csdn.net/qq_31515611/article/details/74352476

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

咸鱼最近在看微信小程序的开发，在看框架的时候在<button>中有个被用到的属性叫做bindtap，作用是“事件绑定，不阻止冒泡”。因为之前搞Html和Css为多，没有看过冒泡，所以看到陌生的名词就去查了一圈，在这里总结一下冒泡的概念和为什么要阻止冒泡的原因。

一.什么是冒泡？
首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。

当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。

当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。

说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。

为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。这些对象的层次关系构成了DOM中的对象树。

事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。

所以，如果这个按钮上面有3层（form、document、window），且这三层都定义了onclick属性，则当按钮的click事件产生时，将会调用4个（包括按钮本身的一个）函数或执行4段语句。

冒泡主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。

二.为什么要阻止冒泡？怎么解决？
很简单的一个例子，盒子one中有一个盒子two，盒子two中有一个button上面绑着事件a，而这个相同事件恰巧在盒子one和two中也有，当button事件被触发时，one和two中的事件也会被触发，所以我们需要进行阻止。
Html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <div class="one">
        <div class="two">
            <button class="butt">Catch me</button>
        </div>
  </div>
   <script type="text/javascript" src="js/jquery2.0.min.js" ></script>
   <script type="text/javascript" src="js/Test1.js" ></script>
    </body>
</html>

JS：

$(function(){
    $('.one').on('click',function(){
        console.log('oneoneone');
    })

$('.two').on('click',function(){
    console.log('twotwotwo');
});
$('.butt').on('click',function(){
    console.log('buttonbuttonbutton');
});
});

点击按钮之后打开审查元素看到控制台下，会发现所有的事件都被触发了，就像这样：
这里写图片描述

这就是为什么有时候需要阻止冒泡的原因之一了。

至于阻止冒泡的方法很简单，常用的是在要实现的事件的Js代码末尾加个return false; 或者event.stopPropagation();
譬如这个例子中，button绑定的事件才是要实现的事件，所以像这样

$(function(){
    $('.one').on('click',function(){
        console.log('oneoneone');
    })

$('.two').on('click',function(){
    console.log('twotwotwo');
});
$('.butt').on('click',function(){
    console.log('buttonbuttonbutton');
    return false;  //或者改成 event.stopPropagation();
});
});

因为这个方法简单直接，咸鱼就不多做累述了。

以上。

请叫我院士

关注

18
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
前端.什么是冒泡和阻止冒泡的原因和方法

咸鱼最近在看微信小程序的开发，在看框架的时候在<btton>中有个被用到的属性叫做bindtap，作用是“事件绑定，不阻止冒泡”。因为之前搞Html和Css为多，没有看过冒泡，所以看到陌生的名词就去查了一圈，在这里总结一下冒泡的概念和为什么要阻止冒泡的原因。一.什么是冒泡？首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生
复制链接

扫一扫