事件冒泡是什么如何用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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
javascript demo 基本技巧
Dec 18 Javascript
Javascript 命名空间模式
Nov 01 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
require.js的用法详解
Oct 20 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php 保留小数点
2009/04/21 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
详解js类型判断
2018/05/22 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
基于Python实现用户管理系统
2019/02/26 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
医药工作者的求职信范文
2013/09/21 职场文书
技术人员面试提纲
2013/11/28 职场文书
幼儿教师研修感言
2014/02/12 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
甘南现象心得体会
2014/09/11 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
68句权威创业名言
2019/08/26 职场文书