<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. AutoIt获取Gridview中可以修改列的值

    有一个界面如上图:黑色框框部分是一个整体,也是一个gridview,如果我想把框框中右侧数据获取出来,该如何操作? 我尝试过了很多途径,都无法成功. 今天,我发现,当鼠标焦点在黑色框框左侧的部分的时候 ...

  2. 洛谷P1466集合——背包

    题目:https://www.luogu.org/problemnew/show/P1466 水题,注意开long long; 代码如下: #include<iostream> #incl ...

  3. 修改cocos2dx 背景颜色

    只需要在AppDelegate的设置FPS后面加入一行: glClearColor(1.0, 1.0, 1.0, 1.0); 同理如果要修改成其它颜色,只需修改里面的值即可( r, g, b, a);

  4. cclfow_小流程设计

    官网演示地址:http://demo.ccflow.org/ 流程的主要需求: 新建流程 登陆系统后台进行设置流程:鼠标右键流程树 选择新建子级类别 输入子级类别名称:流程演示,点击确定即可 点击流程 ...

  5. mfc基于对话框的应用程序,如何设置初始对话框大小,移动控件位置

    void MmPLEntPropertyDlg::SetInitDialogSize() { CRect rectDlg; GetWindowRect(rectDlg);//x,y为对话框左上角的坐标 ...

  6. Codeforces34C【尺取】

    题意: 输入一系列的数,连续数字则输出连续区间 看第一个案例就很明显 思路: 输入字符串输入,预处理一下. 写了个挫尺取- 贴一发挫code--. #include <bits/stdc++.h ...

  7. mysql 分区后查询效率

    准备工作: 蠕虫复制 文章表 增加数据到112万 语法:insert into  tableNameA  select * from tableNameB       未分区查询  54s 改变现有表 ...

  8. iOS 上传的图片在HTML上显示时，图片方向信息(EXIF Orientation)异常

    将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...

  9. 制作ubuntu启动U盘：Windows,Mac osx ,Ubuntu

    1.How to create a bootable USB stick on Windows https://www.ubuntu.com/download/desktop/create-a-usb ...

  10. vue的开发技巧

    1.监听组件的生命周期 比如有父组件 Parent和子组件 Child,如果父组件监听到子组件挂载 mounted就做一些逻辑处理,常规的写法可能如下: // Parent.vue <Child ...