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. 在ASP.NET MVC 项目中 使用 echarts 画统计图

    echarts 官方地址:http://echarts.baidu.com/ 一.根据图中的数据怎么从数据库中获取并组装成对应格式: 从数据库中获取对应数据,然后在项目中引用Newtonsoft.Js ...

  2. C# 合并Excel工作表

    文档合并.拆分是实现文档管理的一种有效方式.在工作中,我们可能会遇到需要将多个文档合并的情况,那如何来实现呢,本文将进一步介绍.关于拆分Excel工作表,可参见这篇文章——C#如何拆分EXCEL工作表 ...

  3. 深入理解JavaScript作用域和作用域链

    前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! ...

  4. 微信小程序--页面的生命周期和参数传递

    页面跳转: 1.函数 点击事件设置bindtap然后在本页面 js 设置函数 redirectTo:关闭当前页,跳转到指定页:   ( unload) navigateTo:保留当前页,跳转到指定页: ...

  5. python将两个数组合并成一个数组的两种方法的代码

    内容过程中,把写内容过程中常用的内容收藏起来,下面的资料是关于python将两个数组合并成一个数组的两种方法的内容,希望能对小伙伴们有帮助. c1 = ["Red","G ...

  6. bootstrap-treeview 在 bootstrap 4 不兼容解决办法及使用

    bootstrap-treeview 是bootstrap的一个树形插件,插件依赖: bootstrap/3.3.7 jquery/3.3.1 经过验证,它不可以在 bootstrap 高于 3.3. ...

  7. Lua在Redis中的应用

    转载至笑松小站http://blog.seoui.com/2018/01/27/redis-lua/ redis从2.6版本开始内置支持Lua解释器,解释器提供了3个函数来处理redis的命令redi ...

  8. C#-委托delegate

    目录 委托的定义 委托的声明 委托的实例 委托的注意细节 泛型委托(详见<精通C#>--10.4泛型委托) 1.Action<>委托 3.Func<>委托 附录 委 ...

  9. Xml文档规则

    Xml文档规则: 名字中不能包含空格 名字不能以数字或标点符号开头 左尖括号 < 后不可以有空格 起始和结束标签的大小写必须一致(严格区分大小写) XML文件中出现的第一个元素是根元素 XML文 ...

  10. GCD多线程的一个全面的题目

    GCD多线程的一个全面的题目