<body>

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

<script>

window.onload = function() {

    var oDiv1 = document.getElementById('div1');

    var oDiv2 = document.getElementById('div2');

    var oDiv3 = document.getElementById('div3');

    function fn1() {

        alert( this.id );

    }

    /*oDiv1.onclick = fn1;

    oDiv2.onclick = fn1;

    oDiv3.onclick = fn1;*/

    //false = 冒泡（出去）     true = 捕获（进来）

    //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数

    /*oDiv1.addEventListener('click', fn1, false);

    oDiv2.addEventListener('click', fn1, false);

    oDiv3.addEventListener('click', fn1, false);*/

    //告诉div1，如果有一个进来的事件触发了你，你就去执行fn1这个函数

    /*oDiv1.addEventListener('click', fn1, true);

    oDiv2.addEventListener('click', fn1, true);

    oDiv3.addEventListener('click', fn1, true);*/

    oDiv1.addEventListener('click', function() {

        alert(1);

    }, false);

    oDiv1.addEventListener('click', function() {

        alert(3);

    }, true);

    oDiv3.addEventListener('click', function() {

        alert(2);

    }, false);

    //3 2 1

}

</script>
下拉菜单--取消冒泡案例：

<style>

        div {

            width: 200px;

            height: 200px;

            background-color: red;

            display: none;

        }

</style>

<script>

    window.onload = function () {

        var oBtn = document.getElementsByTagName('button')[0];

        var oDiv = document.getElementsByTagName('div')[0];

        oBtn.onclick = function (ev) {

            var oEvent = ev || event;

            //取消冒泡，让事件不再往上面传递

            oEvent.cancelBubble = true;

            oDiv.style.display = 'block';

        }

        document.onclick = function () {

            oDiv.style.display = 'none';

        }

    }

</script>

<body>

    <button>显示</button>

    <div></div>

</body>

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

  1. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

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

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

  3. javascript事件捕获与冒泡

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

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

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

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

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

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

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

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

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

  8. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

  9. javascript --- 事件冒泡与事件捕获

    事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...

随机推荐

  1. 「网络流24题」「LuoguP4016」 负载平衡问题

    Description GGG 公司有 nnn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 nnn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运. ...

  2. NSCoding

    在IOS的开发中,小数据量的持久化都用NSUserDefaults来实现,但是NSUserDefaults只能保存NSString, NSNumber, NSDate, NSArray, NSDict ...

  3. vs2008控制台程序运行一闪而过，不显示按任意键继续

    调试运行(F5)而且没插断点.且程序没有暂停的点,就会一闪而过 直接执行(Ctrl+F5),在程序结束前会有“按任意键继续” 当你不想进入调试状态,只想看一看程序执行结果时用ctrl+f5F5会进入调 ...

  4. JS中的回调函数实例浅析

    本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...

  5. 洛谷 - P2774 - 方格取数问题 - 二分图最大独立点集 - 最小割

    https://www.luogu.org/problemnew/show/P2774 把两个相邻的节点连边,这些边就是要方便最小割割断其他边存在的,容量无穷. 这种类似的问题的话,把二分图的一部分( ...

  6. Codeforces 711B 【模拟】

    比赛的时候绝壁打麻烦了... 考虑的好麻烦...wa7...还要判断出来的是不是positive的... 好吧..认了.. #include<cstdio> #include <ma ...

  7. Cg（C for Graphic）语言语义绑定方法（转）

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 语义绑定方法 入口函数输入\ 输出数据的 ...

  8. Django学习:模板继承和配置静态文件

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  9. useradd user 错误解决

    今天给安装Sequoiadb 软体时,出现添加用户和组失败,显示错误: cannot lock /et/passwd; try again later. 在网上查了一下,说是/etc/passwd 文 ...

  10. 7天学完Java基础之6/7

    final关键字的概念与四种用法 final关键字代表最终,不可改变的 常见四种用法: 可以用来修饰一个类 当前这个类不能有任何子类 可以用来修饰一个方法 当final关键字用来修饰一个方法的时候,这 ...