(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事件。

事件冒泡是什么如何用jquery阻止事件冒泡的更多相关文章

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

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  2. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  3. jQuery阻止事件冒泡的例子

    下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...

  4. JQuery 阻止事件冒泡

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){  ...

  5. jquery阻止事件冒泡的方法

    $("table tbody").click(function(e) { e.preventDefault(); //阻止自身的事件,并不能阻止冒泡 e.stopPropagati ...

  6. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  7. JQuery阻止事件冒泡---阻止后续代码执行

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

  8. jquery阻止事件冒泡的3种方式

    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...

  9. JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

随机推荐

  1. [No000050]练习一万小时便能成为天才

    练习一万小时便能成为天才 世界上顶尖的记忆高手都是训练出来的! 加拿大畅销书作家麦尔坎·葛拉威尔在<异数>一书中指出:"人们眼中的天才之所以卓越非凡,并非天资超人一等,而是付出了 ...

  2. uva10167 Birthday Cake

    Lucy and Lily are twins. Today is their birthday. Mother buys a birthday cake for them. Now we put t ...

  3. 你所未知的3种 Node.js 代码优化方式

    from:https://cnodejs.org/topic/56cc2fd6c045c3743304bec6 Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢.从 CPU ...

  4. Centos6.5 设置nfs

    安装 rpcbind 和 nfs-utils yum install rpcbind yum install nfs-utils 设置共享目录 [root@bogon ~]# vim /etc/exp ...

  5. Ubuntu终端命令行不显示颜色

    在网上找到的一个有效方案是在.bash_profile 中增加颜色定义 export LS_COLORS='di=01;35:ln=01;36:pi=40;33:so=01;35:do=01;35:b ...

  6. Java集合系列:-----------01集合的整体框架

    内容来自:http://www.cnblogs.com/skywang12345/p/3308498.html Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映 ...

  7. 2016.11.14测试 长乐一中2014NOIP复赛模拟题 第一题。

    1.正确答案 [题目描述] 小H与小Y刚刚参加完UOIP外卡组的初赛,就迫不及待的跑出考场对答案. "吔,我的答案和你都不一样!",小Y说道,"我们去找神犇们问答案吧&q ...

  8. 启动PPT的时候一直配置vs2013的问题解决

    前几天装了VS2013,结果发现每次启动powerpoint都要配置vs2013,虽然时间花的不多,可我看的就是碍眼,我都想把VS2013卸载来解决了.后来抱着试下的态度竟然在google上找到了解决 ...

  9. 802.11 对于multicast 和 broadcast的处理

    ethernet内部会有broadcast 和 multicast.这两种包都是一个STA向多个STA发包. 当没有wifi存在的时候,LAN口之间的broadcast 和 multicast是可靠转 ...

  10. 一个看似很简单的SQL却难倒了很多人

    一个选课表,有学生id,课程id,老师id,要求选出同时选了语文和数学的学生 USE [tempschool] GO /****** 对象: Table [dbo].[SelectC] 脚本日期: 0 ...