<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. Spring配置错误 No adapter for IAdvice of type

    参考:http://www.2cto.com/kf/201305/211728.html 错误十三 在配置拦截器后,运行的时候报错=> Error creating context 'sprin ...

  2. k8s-部署dashboard1.10.1-十七

    一.获取镜像和填坑 我的k8s是1.13.1,这里dashboard用的1.10.1: 由于国内不能访问Google,而且大部分人可能也没有其他途径访问:只能在阿里云或者其他镜像网站上获取了: 镜像获 ...

  3. 解决sqlserver的sql脚本内存不足问题

    1.Win+R输出cmd 2.sqlcmd -i  E:\Work\xxxxx.sql -d xxxxx(数据库名称) -s 127.0.0.1

  4. POJ3186【区间DP】

    题意: 每次只能取两端,然后第 i 次取要val[ i ]*i,求一个最大值 一切都是错觉[读者省略此段] 这道题目一开始想的就是记忆化搜索,然后太天真了?好像是,一开始用一维dp[ i ]直接代表一 ...

  5. poj3185//BFS随便切...

    //poj 3185 2 //利用bit,通过位运算切换状态 ,然后BFS一下,轻易水过. 3 //说完好像很简单...是的,简单是简单,弱第一次以这种位运算姿势过题,太劲.膜思路 ORZ... 4 ...

  6. hdoj1150（最小点覆盖）

    题意: 两台机器,A台机器有N种模式,B台机器有M种不同的模式,初始模式都是0 以及K个需要运行的任务(i,x,y),在A台机器是x模式,在B台机器是y模式. 请合理为每个任务安排一台机器并合理安排顺 ...

  7. Hexo瞎折腾系列(1) - 准备工作与简单美化

    前言 网上有不少相关的帖子,不过版本会比较旧,而不同版本可能存在代码不同的问题,不过大部分还是大同小异,本系列就不啰嗦重复了,基本只会按照本人所使用的版本以及个人所使用到的内容来进行介绍. 该系列是对 ...

  8. android 启动报错

    报错如下: AAPT err(Facade for 1532009679): libpng error: Read Error Error:Execution failed for task ':ap ...

  9. Codeforces Round #402 (Div. 2) D

    Description Little Nastya has a hobby, she likes to remove some letters from word, to obtain another ...

  10. 第02课 操作系统及Linux 系统介绍

    1.操作系统介绍 操作系统(Operating System,简称OS),是计算机系统中必不可少的基础系统软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心. 操作系统的作用是管 ...