对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就 像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，这个很少 有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。

事实上，捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑，例如适用于ie,opera的attachEvent， 有两个参数，attachEvent(”on”+type,fn)，而适用于所谓标准浏览器的addEventListener则有三个参 数，addEventListener(type,fn,boolean)，前面两个参数不用解释，第三个参数boolean，就是决定注册事件发生在捕 获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段

事件分类
捕获型事件（非IE）、冒泡型事件（所有浏览器都支持）
捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面我用一个图来直观表示：

冒泡型事件我们在工作中可能会比较多遇到，但捕获型事件怎样才会执行到呢，如果我们想要在非 IE 浏览器中要创建捕获型事件，只需将 addEventListener 的第三个参数设为true就好了。

DOME:

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>无标题文档</title>

<meta name="description" content="" />

<meta name="keywords" content="" />

</head>

<body>

<style type="text/css">

*{margin:0;padding:0;}

h1{text-align:center;color:#666;margin-top:18px;}

#content{width:700px;height:250px;border:5px solid green;margin:20px auto;position:relative;}

#obj1{height:100px;background:#d5d5d5;}

#obj2{background:#777;}

#obj3{position:absolute;top:200px;left:150px;width:200px;background:#555;}

#obj4{height:100px;background:#999;margin-top:50px;}

.active{color:#f00;}

</style>

<h1>悟透事件的捕获和冒泡</h1>

<div id="content">

    <div id="obj1">

        <h2>元素a</h2>

        <div id="obj2">

            <h2>元素b</h2>

            <div id="obj3">

                <h2>元素c</h2>

            </div>

        </div>

    </div>

    <div id="obj4">

        <h2>元素d</h2>

    </div>

</div>

<script type="text/javascript">

    var divs = document.getElementById("content").getElementsByTagName("div");

    var count = 1;

    for(var i=0;i<divs.length;i++){

        bindEvent(divs[i],"click",function(){

            var obj = document.createTextNode("->"+count++);

            this.getElementsByTagName("h2")[0].insertBefore(obj,null);

            this.className = "active";

        });

    }

    //取消事件冒泡

    function stopBubble(e){

        e = e||window.event;

        if(e.stopPropagation){

            e.stopPropagation();

        }else{

            e.cancelBubble = true;

        }

    }

    //绑定事件

    function bindEvent(elem,type,fn){

        if(elem.attachEvent){

            var typeRef = "_" + type;

            if(!elem[typeRef]){

                elem[typeRef] = [];

            }

            for(var i in elem[typeRef]){

                if(elem[typeRef][i] == fn){

                    return;

                }

            }

            elem[typeRef].push(fn);

            elem["on"+type] = function(){

                for(var i in this[typeRef]){

                    this[typeRef][i].apply(this,arguments);

                }

            }

        }else{

            elem.addEventListener(type,fn,false);

        }

    }

    //移除事件绑定

    function removeEvent(elem,type,fn){

        if(elem.detachEvent){

            if(elem["_"+type]){

                for(var i in elem["_"+type]){

                    if(elem["_"+type][i] == fn){

                        elem["_"+type].splice(i,1);

                        break;

                    }

                }

            }

        }else{

            elem.removeEventListener(type,fn,false);

        }

    }

</script>

</body>

</html>

取消事件冒泡：

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，详见以下代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0; padding:0;}

</style>

</head>

<body>

<div id="obj1" style=" width:500px; height:500px; background:#000;">

    <div id="obj2" style="width:400px; height:400px; background:red;"></div>

</div>

<script type="text/javascript">

    //阻止事件冒泡的通用函数

    function stopBubble(e){

        // 如果传入了事件对象，那么就是非ie浏览器

        if(e&&e.stopPropagation){

            //因此它支持W3C的stopPropagation()方法

            e.stopPropagation();

        }else{

            //否则我们使用ie的方法来取消事件冒泡

            window.event.cancelBubble = true;

        }

    }

    var obj1 = document.getElementById('obj1');

    var obj2 = document.getElementById('obj2');

    obj1.onclick = function(){

        alert('我点击了obj1');

    }

    obj2.onclick = function(e){

        alert('我点击了obj2');

        stopBubble(e);

    }

</script>

</body>

</html>

现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。

javascript事件捕获与冒泡的更多相关文章

  1. JavaScript 事件(捕获和冒泡 兼容性写法)

    事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...

  2. JavaScript事件捕获冒泡与捕获

    事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是 ...

  3. 【转】JavaScript 事件顺序：冒泡和捕获

    补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又 ...

  4. javascript -- 事件捕获，事件冒泡

    使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...

  5. dom事件不求甚解，色解事件捕获和冒泡

    以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...

  6. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  7. Spirit带你彻底了解事件捕获和冒泡机制

    Dom标准事件模型 在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的 捕获阶段==>目标阶段==>冒泡阶段 目标元素和非目标元素 在介绍事件捕获和事件冒泡前 我们先要 ...

  8. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  9. javascript事件捕获机制，dom tree

    $(document,"a").on("click",function(){alert(2);return false;}); $("<a> ...

随机推荐

  1. ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

    今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...

  2. shopnc怎么开启伪静态 shopnc开启伪静态的方法

    最近要给一个shopnc网站开启伪静态,用的是shopnc b2b2c,在网上搜索了好多shopnc开启伪静态的方法,但都是针对shaopnc c2c的,没有关于shopnc b2b2c的,最后终于找 ...

  3. Hough Transform直线检测

    本文原创,如转载请注明出处. Hough Transform 是一种能提取图像中某种特定形状特征的方法,可以将其描述成一种把图像空间中的像素转换成Hough空间中直线或曲线的一种映射函数.通过利用Ho ...

  4. 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统（TouchWiz）

    转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...

  5. [TYVJ] P1015 公路乘车

    公路乘车 描述 Description 一个特别的单行街道在每公里处有一个汽车站.顾客根据他们乘坐汽车的公里使来付费.例如样例的第一行就是一个费用的单子. 没有一辆车子行驶超过10公里,一个顾客打算行 ...

  6. cf B. Fixed Points

    http://codeforces.com/contest/347/problem/B #include <cstdio> #include <cstring> #includ ...

  7. MLC固态硬盘，与入量是3000次P/E

    固态硬盘是什么,固态硬盘寿命有多长 SSD泛指使用闪存芯片组成的SSD固态硬盘,是使用FLASH闪存颗粒作为存储单元,不再使用传统的机械存储方法,使用模拟的方式虚拟出传统 硬盘存取方式和扇区等,也可以 ...

  8. 【转】Android下编译jni库的二种方法(含示例)

    原文网址:http://blog.sina.com.cn/s/blog_3e3fcadd01011384.html 总结如下:两种方法是:1)使用Android源码中的Make系统2)使用NDK(从N ...

  9. C++初始化列表问题

    C++初始化列表问题,类中有一个对象类型的数组成员变量,在初始化列表中初始化时报错“[]”操作符语法错误 class ClassA{private ClassB arrayOfObjectClassB ...

  10. Video.js网页视频播放插件

        插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...