<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. 洛谷P3830 [SHOI2012]随机树——概率期望

    题目:https://www.luogu.org/problemnew/show/P3830 询问1:f[x]表示有x个叶节点的树的叶节点平均深度: 可以把被扩展的点的深度看做 f[x-1] ,于是两 ...

  2. 收集几个Android CalendarView非常用属性

    android:dateTextAppearance 设置日历View在日历表格中的字体皮肤;android:firstDayOfWeek 指定日历第一个星期的第一天,在日历中横向所在位置,从右边向左 ...

  3. rsync(二)：inotify+rsync详细说明和sersync

    以下是rsync系列篇: inotify+rsync 如果要实现定时同步数据,可以在客户端将rsync加入定时任务,但是定时任务的同步时间粒度并不能达到实时同步的要求.在Linux kernel 2. ...

  4. JAVA 集合JGL

    集合 Java提供了四种类型的“集合类”:Vector(矢量).BitSet(位集).Stack(堆栈)以及Hashtable(散列表).与拥有集合功能的其他语言相比,尽管这儿的数量显得相当少,但仍然 ...

  5. 实现列表两端完全对其text-aligh:justify 和display：inline-block

    dispaly:inline-block 对于块级元素,在IE8-下是不兼容的,所以一般不要用在这些元素上,可以用在inline元素上:span text-align:justify实现子元素完全对齐 ...

  6. codeforces 126B

    Asterix, Obelix and their temporary buddies Suffix and Prefix has finally found the Harmony temple. ...

  7. Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位（转）

    Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...

  8. python 测试用例

    mydict.py代码如下: class Dict(dict): def __init__(self, **kw): super().__init__(**kw) def __getattr__(se ...

  9. Codeforces732E Sockets

    首先检测有木有和Computer匹配的Socket,如果有则将其匹配. 然后将所有没有匹配的Socket连上Adapter,再去检测有木有Computer与Socket匹配. 重复这个操作31次,所有 ...

  10. P5168 xtq玩魔塔

    传送门 其实就是板子--只要会克鲁斯卡尔重构树和带修莫队就可以了 这么想着的我就调了将近一个下午-- 思路其实比较清晰,然而码量很大,细节贼多-- 不难看出只在最小生成树上走最优,于是建出克鲁斯卡尔重 ...