(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阻止的更多相关文章

  1. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  2. 阻止jQuery事件冒泡

    Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...

  3. Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件

    $(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...

  4. js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) 转

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  5. jQuery 事件冒泡

    1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...

  6. jquery 事件冒泡 解决 ie firefox 兼容性问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. Jquery事件冒泡

    事件冒泡 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...

  8. jquery——事件冒泡、事件委托

    一个事件冒泡的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

随机推荐

  1. 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 ...

  2. Sql控制反转小尝试

    假想用配置Sql语句的方式来完毕一个处理逻辑,而且映射到一个Url,这样当请求这个url的时候,运行前面配置的sql. 以下的一段详细配置,比如 当请求pagerlistdept.do的时候,会传入參 ...

  3. iOS的settings bundle中开关button(Toggle Switch)取不到值的问题

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在Xcode7.2中设置App的settings bundle ...

  4. 自己定义View Layout过程 - 最易懂的自己定义View原理系列(3)

    前言 自己定义View是Android开发人员必须了解的基础 网上有大量关于自己定义View原理的文章.但存在一些问题:内容不全.思路不清晰.无源代码分析.简单问题复杂化等等 今天,我将全面总结自己定 ...

  5. 【POJ 3071】 Football(DP)

    [POJ 3071] Football(DP) Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4350   Accepted ...

  6. 【转】Andorid中Intent的使用-返回数据给上一个活动

    第一个Activity  A启动另外一个Activity B,B返回数据给A ============================================================= ...

  7. PAT 1069 1070 1071 1072

    pat 1069 The Black Hole of Numbers 水题,代码如下: #include<cstdio> #include<cstdlib> #include& ...

  8. maven安装配置部署建项运行

    http://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket/1.4.1.RELEA ...

  9. AndroidStudio不自己主动加入新创建的文件到VCS

    从远程仓库下载了一份源代码,版本号控制是用的SVN.但发现了一个问题.改动和删除文件时,版本号管理都有记录. 可是假设我新建一个文件时.却发现没有自己主动关联到VCS,也不能手动加入到VCS中,这样我 ...

  10. https调试

    我们知道https通信在开始时会发送一个METHOD为CONNECT的请求,让服务器将证书以及相关的信息返回给浏览器,在没有得到这些信息之前,浏览器是不会信任服务器发来的任何数据的.So现在我们要让F ...