1 . 什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了 click 事件，同时<body>元素上也绑定了 click 事件。完整代码如下：

<script type="text/javascript">

$(function(){

    // 为span元素绑定click事件

    $('span').bind("click",function(){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

</body>

页面初始化效果下图所示。

当单击内部<span>元素，即触发<span>元素的 click 事件时，会输出3条记录，如下图所示。这就是由事件冒泡引起的。

在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的元素<body>，并且每一个元素都会按照特定的顺序响应 click 事件。元素的 click 事件会按照以下顺序“冒泡”。

(1) <span>
(2) <div>
(3) <body>

之所以称为冒泡，是因为事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端，如下图所示。

2.事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果。上例中，本来只想触发<span>元素的 click 事件，然而<div>元素和<body>元素的 click 事件也同时被触发了。因此，有必要对事件的作用范围进行限制。当单击<span>元素时，只触发 <span>元素的 click 事件，而不触发<div>元素和<body>元素的 click 事件；当单击<div>元素时，只触发<div>元素的 click 事件，而不触发<body>元素的 click 事件。为了解决这些问题，介绍以下内容。

（1）事件对象

由于 IE-DOM 和标准 DOM 实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题， jQuery 进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。

在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery 代码如下：

$("element").bind("click", function(event){  // event：事件对象

　　//...

});

这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

（2）停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在 jQuery 中提供了stopPropagation() 方法来停止事件冒泡。代码如下：

$(function(){

       // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

（3）阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。在 jQuery 中，提供了 preventDefault() 方法来阻止元素的默认行为。

举一个例子，在项目中，经常需要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。代码如下：

<script type="text/javascript">

$(function(){

   $("#sub").bind("click",function(event){

         var username = $("#username").val();  //获取元素的值

         if(username==""){     //判断值是否为空

             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息

             event.preventDefault();  //阻止默认行为 ( 表单提交 )

         }

   })

})

</script>

<body>

<form action="test.html">

用户名：<input type="text" id="username" />

<br/>

<input type="submit" value="提交" id="sub"/>

</form>

<div id="msg"></div>

</body>

当用户名为空时，单击“提交”按钮，会出现下图所示的提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault() 方法能阻止表单的提交行为。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回 false 。 这是对在事件对象上同时调用 stopPrapagation() 方法和 preventDefault() 方法的一种简写方式。

在表单的例子中，可以把 event.preventDefault(); 改写为 return false;  同理，也可以把 event.stopPropagation(); 改写为 return false;

（4）事件捕获
事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。还是冒泡事件的例子，其中元素的 click 事件会按照以下顺序捕获。

(1) <body>
(2) <div>
(3) <span>

很显然，事件捕获是从最外层元素开始，然后再到最里层元素。因此绑定的 click 事件，首先会传递给<body>元素，然后传递给<div>元素，最后才传递给<span>元素。遗憾的是，并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过 JavaScript 来修复。 jQuery 不支持事件捕获，如果读者需要使用事件捕获，请直接使用原生的JavaScript 。

jQuery 事件冒泡的更多相关文章

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

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

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

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

  3. 阻止jQuery事件冒泡

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

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

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

  5. Jquery事件冒泡

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

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

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

  7. 事件冒泡及事件委托的理解（JQuery Dom操作）

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  8. jq 事件冒泡总结

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

  9. 什么是JS事件冒泡

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

随机推荐

  1. 【小o地图Excel插件版】计算两点间驾车路径，获取途径道路、驾车距离、耗时等信息

    小o地图Excel插件版:一款基于Excel软件开发的地图软件,提供基于Excel表格进行地理数据挖掘.地理数据分析.地图绘制.地图图表等功能的工具类软件.具有易用.高效.稳定的特点,能够满足地理数据 ...

  2. WEB项目挂载到IIS session过期

    莫名丢失问题: 1.可能是因为系统内部连续的抛出了5次以上的异常 导致进程重启(当前所有在线用户) 2.IIS6 以上默认配置进程,session存在进程内其实是在W3wp.exe中这个进程不稳定,在 ...

  3. jquery获取内容和属性的方法

    通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...

  4. ArcGIS Server较早版本切片迁移注意事项

    原创文章,转载须标明出处自: http://www.cnblogs.com/gisspace/p/8286838.html -------------------------------------- ...

  5. MVP模式, 开源库mosby的使用及代码分析

    Android中的构架模式一直是一个很hot的topic, 近年来Architecture components推出之后, MVVM异军突起, 风头正在逐渐盖过之前的MVP. 其实我觉得MVP还是有好 ...

  6. django源码分析 python manage.py runserver

    django是一个快速开发web应用的框架, 笔者也在django框架上开发不少web应用,闲来无事,就想探究一下django底层到底是如何实现的,本文记录了笔者对django源码的分析过程 I be ...

  7. MySQL常用命令汇总（偏向运维管理）

    基础部分 1. select @@version; ##查询当前mysql的版本. 2. show variables like 'port';##查看mysql实例的端口. 3. show vari ...

  8. Linux分页机制之概述--Linux内存管理(六)

    1 分页机制 在虚拟内存中,页表是个映射表的概念, 即从进程能理解的线性地址(linear address)映射到存储器上的物理地址(phisical address). 很显然,这个页表是需要常驻内 ...

  9. Java - String 的字面量、常量池、构造函数和intern()函数

    一.内存中的 String 对象 Java 的堆和栈 对于基本数据类型变量和对象的引用,也就是局部变量表属于栈内存: 而通过 new 关键字和 constructor 创建的对象存放在堆内存: 直接的 ...

  10. 微信小程序测试方法总结

    最近的新项目是小程序加web端后台管理 主要找了些文章方便自己使用也分享给大家: 小程序官方文档 https://developers.weixin.qq.com/miniprogram/design ...