什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈
 
 
 
(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事件。

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

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

    (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. JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡

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

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

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

随机推荐

  1. Sql Server函数全解&lt;二&gt;数学函数

    阅读目录 1.绝对值函数ABS(x)和返回圆周率的函数PI() 2.平方根函数SQRT(x) 3.获取随机函数的函数RAND()和RAND(x) 4.四舍五入函数ROUND(x,y) 5.符号函数SI ...

  2. web项目 验证码 *** 最爱那水货

    1. jsp代码 : <Script> function changeImg(){ document.getElementById("certImg").src =&q ...

  3. MapReduce编程系列 — 2:计算平均分

    1.项目名称: 2.程序代码: package com.averagescorecount; import java.io.IOException; import java.util.Iterator ...

  4. IsPostBack and DropdownList.

    Encounted the issue accident when helping my classmate dealing with his homework assignment,it turns ...

  5. The Suspects(简单的并查集)

    Description Severe acute respiratory syndrome (SARS), an atypical pneumonia of unknown aetiology, wa ...

  6. Indy的评价

    已经抛弃了indy,实在是不好,tcp在android下退出报错.我现在改用系统自带的httpclient.推荐RTC RTC带有一个tcp组件,不过处理方式跟indy不同,测试过,在android下 ...

  7. 读取文件—open()、read()

    摘自:http://www.iplaypython.com/sys/open.html 在Windows下的powershell打开python: Win+R打开运行窗口,输入powershell,输 ...

  8. GAME——转圈游戏

    我们在生命的路上常常绝望 大概是因为弯路走了太多 脚上的泡被磨起又磨破 像我们所有的幻想与梦 起起落落. 所以说 我这道题考场上面和题解想得一模一样啊啊啊啊啊啊啊啊啊啊!!!!!! 但是就是打复杂了啊 ...

  9. centos tar 常用

    tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用 ...

  10. C#基础篇十小练习

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P03练 ...