<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. Watir: Watir-WebDriver对富文本编辑器的定位于Watir是不一致的。

    Watir对富文本编辑,一般可以采用b.frame().document.body.innerText = "Value you want to insert"但是Watir-We ...

  2. [yii2]Module的Namespace和控制器位置

    namespace和目录对应,否则无法找到控制器类,module文件在根路径 使用gii生成Module为\app\admin,那么 namespace app; class admin extend ...

  3. Darwin Streaming Server 核心代码分析

    基本概念 首先,我针对的代码是Darwin Streaming Server 6.0.3未经任何改动的版本. Darwin Streaming Server从设计模式上看,采用了Reactor的并发服 ...

  4. mounted

    注意 mounted 不会承诺所有的子组件也都一起被挂载.如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted: mounted: function () { t ...

  5. oracle报ORA-00911：invalid character

    转自:http://www.cnblogs.com/chuang-sharing/p/9493316.html 今天查问题的时候,发现一个在分号后边加注释,解析错误的问题: select decode ...

  6. 如何优雅地停止Java进程

    目录 理解停止Java进程的本质 应该如何正确地停止Java进程 如何注册关闭钩子 使用关闭钩子的注意事项 信号量机制 总结 理解停止Java进程的本质 我们知道,Java程序的运行需要一个运行时环境 ...

  7. bzoj 3365: [Usaco2004 Feb]Distance Statistics 路程统计【容斥原理+点分治】

    统计在一个root下的两个子树,每个子树都和前面的运算一下再加进去对于这种需要排序的运算很麻烦,所以考虑先不去同子树内点对的算出合法点对个数,然后减去每一棵子树内的合法点对(它们实际上是不合法的,相当 ...

  8. c#删除指定文件夹中今天之前的文件

    1.说明 使用Directory类对指定文件夹下的今天或者更早日期之前的文件进行删除.原文链接:http://www.cnblogs.com/lengzhan/p/6423943.html 2.代码 ...

  9. iperf工具学习记录

    源码下载地址:http://sourceforge.net/projects/iperf/ 编译命令: tar -zxvf iperf-2.0.5.tar.gz cd iperf-2.0.5 ./co ...

  10. 自定义层or网络

    目录 Outline keras.Sequential Layer/Model MyDense MyModel Outline keras.Sequential keras.layers.Layer ...