前端.什么是冒泡和阻止冒泡的原因和方法
来源:互联网 发布:linux系统克隆教程 编辑:程序博客网 时间:2024/06/14 09:03
咸鱼最近在看微信小程序的开发,在看框架的时候在<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();});});
因为这个方法简单直接,咸鱼就不多做累述了。
以上。
- 前端.什么是冒泡和阻止冒泡的原因和方法
- 前端阻止事件冒泡和默认事件
- 阻止冒泡的方法
- 冒泡事件和捕获事件以及阻止冒泡和捕获方法的详解
- javascript事件冒泡实例详解和jquery阻止事件冒泡的两种方法
- 阻止事件冒泡和围绕.on()方法 [.selector]事件委托中冒泡情况的探讨
- HTML事件冒泡和JQuery阻止事件冒泡的方式
- 事件冒泡的阻止和应用场景
- 让它冒泡和阻止冒泡
- 阻止冒泡和阻止默认事件的兼容性写法
- javascript的阻止默认事件和阻止冒泡事件
- 阻止冒泡和默认行为
- 阻止冒泡和默认事件
- javascript阻止冒泡和阻止默认行为
- 阻止冒泡和阻止浏览器默认行为
- js阻止冒泡和阻止默认行为
- 什么是冒泡和捕获?
- javascript事件冒泡详解和捕获、阻止方法
- CC3200-UDP-Client
- 正则表达式高级技巧及实例详解
- js分享代码(新浪微博,腾讯微博,QQ空间,QQ好友)
- mac下配置maven环境
- Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
- 前端.什么是冒泡和阻止冒泡的原因和方法
- 分享
- bzoj1036树的统计Count(LCT)
- java解析python插件,jython打包部署报错org.python.core.PyException: null
- DOM(一)一些属性方法介绍以及兼容性问题
- json_encode中文Unicode转码问题
- DPC定时器
- An ffmpeg and SDL Tutorial 学习笔记(七)
- QQ在线客服