事件冒泡是什么如何用jquery阻止事件冒泡


Posted in Javascript onMarch 20, 2013

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

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

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

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

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

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

所以,如果这个按钮上面有3层(form、document、window),且这三层都定义了onclick属性,则当按钮的click事件产生时,将会调用4个(包括按钮本身的一个)函数或执行4段语句。
事件的这几个特性在0级dom中也是适用的。

(2)jquery阻止事件起泡实例
1、通过返回false来取消默认的行为并阻止事件起泡。
jQuery 代码:

$("form").bind( 
"submit", 

function() { 


return false; 

 } 
);

2、通过使用 preventDefault() 方法只取消默认的行为。
jQuery 代码:
$("form").bind( 
"submit", 

function(event){ 


event.preventDefault(); 

} 
);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。
jQuery 代码:
$("form").bind( 
"submit", 

function(event){ 


event.stopPropagation(); 

} 
);

(3)关于js事件起泡的验证
今天这个问题主要涉及到几个关键词:对象,触发事件,捕获事件,执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水,但是这杯水是分层次的,最底下是当前触发事件的对象。然后越往上范围越大,最顶层肯定是window,倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.one').click(function(e){ 
alert('one'); 
});




 
$('.two').click(function(e){   
alert('two'); 
}); 
$('.three').click(function(e){ 
alert('three'); 
//阻止起泡取消下面的注释 
// e.stopPropagation(); 
}); 
}); 
</script> 
<div class="one" style="width:200px;height:200px;background:green;"> 
one 
<div class="two" style="width:150px;height:150px;background:yellow;"> 
two 
<div class="three"> 
three 
</div> 
</div> 
</div>

(4)总结
1.一个事件起泡对应触发的是上层的同一事件

特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件

(双击包含单击)。
2.如果在click事件中,在你要处理的事件之前加上e.preventDefault();
 那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。
3.e.stopPropagation()只要在click事件中,就不会触发上层click事件。

Javascript 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
js实现点赞效果
Mar 16 Javascript
js实现简单扫雷
Nov 27 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 #Javascript
jquery的ajax请求全面了解
Mar 20 #Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 #Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 #Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 #Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 #Javascript
You might like
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
TensorFlow模型保存和提取的方法
2018/03/08 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python实现扫雷小游戏
2020/04/24 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python识别验证码的思路及解决方案
2020/09/13 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
12岁生日感言
2014/01/21 职场文书
代理班主任的自我评价
2014/02/04 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
人大代表选举标语
2014/10/07 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
民主评议党员个人总结
2015/02/13 职场文书
面试通知短信
2015/04/20 职场文书
学习心理学心得体会
2016/01/22 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang