<!doctype html>

<html lang="en">

 <head>

  <meta charset="gb2312">

  <style>

    #top{

        width:400px;

        height:400px;

        background:red;

    }

    #middle{

        width:300px;

        height:300px;

        background:blue;

    }

    #bottom{

        width:200px;

        height:200px;

        background:yellow;

    }

  </style>

  <script>

        window.onload = function(){

            var oTop = document.getElementById('top');

            var oMiddle = document.getElementById('middle');

            var oBottom = document.getElementById('bottom');

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

                console.log('top1');

            },false);

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

                console.log('middle1');

            },false);

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

                console.log('bottom1');

            },false);

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

                console.log('top2');

            },true);

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

                console.log('middle2');

            },true);

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

                console.log('bottom2');

            },true);

        }

  </script>

  <title>event</title>

 </head>

 <body>

     <div id='top'>

        <div id='middle'>

            <div id='bottom'></div>

        </div>

    </div>

 </body>

</html>

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

  1. js高级：event，事件冒泡，事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  2. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

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

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

  4. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  5. JS事件（事件冒泡和事件捕获）

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  6. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  7. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  8. 彻底弄懂JS的事件冒泡和事件捕获

      先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡:   return false; ...

  9. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  10. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

随机推荐

  1. 深入理解const char*p,char const*p,char *const p,const char **p,char const**p,char *const*p,char**const p

    由于没有const*运算,const实际上修饰的是前面的char*,但不能在定义时转换写成 const(char *)*p,因为在定义是"()"是表示函数. 三.深入理解7种组合 ...

  2. 使用innodb_force_recovery解决MySQL崩溃无法重启问题

    因为日志已经损坏,这里采用非常规手段,首先修改innodb_force_recovery参数,使mysqld跳过恢复步骤,将mysqld 启动,将数据导出来然后重建数据库.innodb_force_r ...

  3. UGUI RectTransform

    RectTransform解析 当 Anchor 在同一点时,显示的是物体的座标与大小Pos X.Pos Y.Width.Height ,当 Anchor 不在同一点时(此时会形成矩形),显示的会是 ...

  4. How to Pronounce BEAUTIFUL

    How to Pronounce BEAUTIFUL Share Tweet Share Tagged With: 3-Syllable Can you say this word beautiful ...

  5. Hibernate 的三种状态详解

    hibernate的对象有3种状态,分别为:瞬时态(Transient).持久态(Persistent).脱管态(Detached). 处于持久态的对象也称为PO(Persistence Object ...

  6. Managing Images on smartos

    SmartOS依赖images.images是包含在创建新zone或虚拟机时使用的磁盘或文件系统映像和元数据的模板. images使用imgadm工具进行管理. 使用此工具,您可以: 查看和下载在公共 ...

  7. dreamwave基础

    WEBcs架构需要在客户段安装程序, 需要安装程序, 工作量会比较大, 需要安装和维护, 比如以后系统升级, 会很麻烦. 优点是一些业务逻辑可以在客户端, 可以减少服务器的一些压力, 客户端的界面操作 ...

  8. 真机IOS8.3以上的文件夹共享

    ios8.3以上的版本,苹果规定需要验证身份,将不在默认开启文件共享,但是在实际测试工作中,提取文件是经常需要做的操作,笔者在使用GT采集性能数据后,通过itoos或itunes都无法获得目标app的 ...

  9. 使用ecstore-sdk开发包制作易开店和启明星模板

    前言: 尽管商派官网有模板开发教程,但是诸多方面太过笼统.我等平庸之辈,纵使细心研读,潜心修炼,亦未能品味练功境界,领悟其中真谛. 商派有云,此九阳真经不用您挥刀****本人却感觉此教程令人抓狂,无人 ...

  10. Go开发之VScode安装

    1.找到官网 https://code.visualstudio.com/ 2根据自己机器环境下载 3.下载vscode地址,macos版本 https://vscode.cdn.azure.cn/s ...