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

咸鱼最近在看微信小程序的开发，在看框架的时候在<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();
});
});

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

以上。

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

浏览器事件捕获冒泡以及阻止冒泡
浏览器事件捕获冒泡以及阻止冒泡一.浏览器的dom事件流 dom事件流有三个阶段,捕获阶段->目标阶段->冒泡阶段,不管是有没有绑定事件,只要发生点击事件,事件的处理将从DOM层次的根开始 ...
jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
什么是事件冒泡？如何用jquery/js阻止事件冒泡？阻止冒泡有什么作用？小生来抛个砖。...
2019独角兽企业重金招聘Python工程师标准>>> 前言:有时候,当我们给一个外层 div 添加了一个'click'事件,然而在内层的其他元素我们也为它添加了 'click'事件 ...
html 传参阻止冒泡,angular阻止冒泡事件
当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了. 以angular项目为例,我们都知道angular ...
a标签js阻止跳转_前端笔试知识点：阻止冒泡
我们先来看一道BOSS直聘上面的选择题: 你知道这道题选什么吗? - - - - - - - - - - - 没错,选D 如果你知道选D的原因,那你就不用往下面看了,节约你宝贵的时间: 如果你不知道, ...
js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...
JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消 ...

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

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

最新文章

热门文章