【JQuery】事件冒泡及使用jQuery阻止
（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）冒泡事件的捕获
如果子元素产生了一个事件，那么这个事件会其父元素传播，如果父元素的父元素也有相应的事件函数，那么就会继续触发，直到向上找完所有的父元素。
比如，下面是一个冒泡事件捕获的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery bubble test</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function catchBubble(event){
alert(event.target.innerHTML);
}
</script>
</head>
<body>
<table onclick="catchBubble(event)">
<tr><td>jame</td><td>31</td></tr>
<tr><td>locy</td><td>25</td></tr>
<tr><td>gosling</td><td>64</td></tr>
</table>
</body>
</html>
只需要点击任意一个td元素，table元素的单击事件就或捕获到下面所有的点击的元素内容。
下面的图片能够显示了冒泡事件处理机制的简单模型：
（5）总结
1.一个事件起泡对应触发的是上层的同一事件
特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件
（双击包含单击）。
2.如果在click事件中，在你要处理的事件之前加上e.preventDefault();
那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。
3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。
4.冒泡的事件传递的最顶层是document文档对象。
【JQuery】事件冒泡及使用jQuery阻止的更多相关文章
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- 阻止jQuery事件冒泡
Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...
- Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件
$(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...
- js阻止浏览器的默认行为以及停止事件冒泡（用JQuery实现回车提交，兼容IE、FF浏览器） 转
1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...
- jQuery 事件冒泡
1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...
- jquery 事件冒泡 解决 ie firefox 兼容性问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- Jquery事件冒泡
事件冒泡 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...
- jquery——事件冒泡、事件委托
一个事件冒泡的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
随机推荐
- how-to-get-a-job-in-deep-learning
http://blog.deepgram.com/how-to-get-a-job-in-deep-learning/ How to Get a Job In Deep Learning 22 SEP ...
- Sql控制反转小尝试
假想用配置Sql语句的方式来完毕一个处理逻辑,而且映射到一个Url,这样当请求这个url的时候,运行前面配置的sql. 以下的一段详细配置,比如 当请求pagerlistdept.do的时候,会传入參 ...
- iOS的settings bundle中开关button(Toggle Switch)取不到值的问题
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在Xcode7.2中设置App的settings bundle ...
- 自己定义View Layout过程 - 最易懂的自己定义View原理系列（3）
前言 自己定义View是Android开发人员必须了解的基础 网上有大量关于自己定义View原理的文章.但存在一些问题:内容不全.思路不清晰.无源代码分析.简单问题复杂化等等 今天,我将全面总结自己定 ...
- 【POJ 3071】 Football（DP）
[POJ 3071] Football(DP) Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4350 Accepted ...
- 【转】Andorid中Intent的使用-返回数据给上一个活动
第一个Activity A启动另外一个Activity B,B返回数据给A ============================================================= ...
- PAT 1069 1070 1071 1072
pat 1069 The Black Hole of Numbers 水题,代码如下: #include<cstdio> #include<cstdlib> #include& ...
- maven安装配置部署建项运行
http://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket/1.4.1.RELEA ...
- AndroidStudio不自己主动加入新创建的文件到VCS
从远程仓库下载了一份源代码,版本号控制是用的SVN.但发现了一个问题.改动和删除文件时,版本号管理都有记录. 可是假设我新建一个文件时.却发现没有自己主动关联到VCS,也不能手动加入到VCS中,这样我 ...
- https调试
我们知道https通信在开始时会发送一个METHOD为CONNECT的请求,让服务器将证书以及相关的信息返回给浏览器,在没有得到这些信息之前,浏览器是不会信任服务器发来的任何数据的.So现在我们要让F ...