1.事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

2.事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确target

3.DOM事件流：同时支持事件捕获与事件冒泡，事件捕获发生在事件冒泡之前，DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

下图是DOM事件流中的事件捕获与事件冒泡过程：

js中事件监听方法总共有三种，分别如下所示：

  • element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
  • element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持
  • element[’on’ + type] = function(){} // 所有浏览器

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行。

传统的element[’on’ + type] = function(){}与addEventListener(event,fn,useCapture)区别在于element[’on’ + type] = function(){}无法进行事件捕获，并且element[’on’ + type] = function(){}不支持对同一个元素的同一个事件注册多个事件监听器，后定义的事件会覆盖先定义的事件。

4.事件捕获的小实验，代码如下：

实验一：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

     body{

         background-color: yellow;

     }

          div{

              background-color: red;

              padding: 100px;

          }

          img{

              padding: 50px;

          }

     </style>

 </head>

 <body id="body">

     <div id="div">

          <img src="frame.gif" id="img" />

     </div>

     <script type="text/javascript">

          function onBody(event){

              console.log("event capture in body");

          }

          function onDiv(event){

              console.log("event capture in div");

              event.bubbles=true;

          }

          function onImg(event){

              console.log("event capture in img");

              event.bubbles=true;

          }

          window.onload=function(){

              var aimg=document.getElementById("img");

              aimg.addEventListener("click",onImg);

              var adiv=document.getElementById("div");

              adiv.addEventListener("click",onDiv);

              var abody=document.getElementById("body");

              abody.addEventListener("click",onBody,true);

          }

     </script>

 </body>

 </html>

这是一个简单的小实验，其中定义了三个function，分别为onDiv，onImg，onBody，其中onBody的第三个参数定义为true，说明该函数在事件捕获时执行。

在Chrome浏览器下，单击img部分得到的结果如下：

由于单击事件最直接的target是img，onbody添加了事件捕获时执行的函数，所以会输出第一行，第二行是事件直接触发img上的事件，输出第二行，第三行是事件冒泡时执行了定义在div上的函数，输出第三行。

实验二:

如果将onBody的addEventListener的第三个参数不添加或者改成false，那么onBody的函数就会在事件冒泡时执行，得到如下结果：

js中关于事件捕获与事件冒泡的小实验的更多相关文章

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

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

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

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

  3. js事件捕获，事件冒泡，事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  4. JS事件捕获和事件冒泡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...

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

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

  6. DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

    平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...

  7. javascript -- 事件捕获，事件冒泡

    使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...

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

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

  9. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

随机推荐

  1. 【转】安卓apk反编译、修改、重新打包、签名全过程

    首先明确,反编译别人apk是一件不厚道的事情.代码是程序员辛苦工作的成果,想通过这种手段不劳而获,是不对的.这也说明,代码混淆是非常重要的.本文抱着学习的态度,研究在一些特殊的情况下如果有需要,该怎么 ...

  2. swift基础教程笔记

    http://www.imooc.com/learn/127 <玩儿转swift> 慕课网教程笔记,自己根据2.1的语法做了更新. I. 1.通过playground来学习.熟悉swift ...

  3. iPhone,iPad如何获取WIFI名称即SSID

    本文转载至 http://blog.csdn.net/wbw1985/article/details/20530281  2010年开始苹果清理了一批APP Store上的WIFI扫描软件, 缘由语焉 ...

  4. 搭建sftp服务+nginx代理

    在公司,经常会用到sftp服务,比如两个公司对接生产项目,其中一方,要在sftp上上传pdf文件,另一方公司要在sftp服务器上用nginx代理直接下载pdf文件.下面就说说我在实际中应用到的sftp ...

  5. 【BZOJ4453】cys就是要拿英魂！ 后缀数组+单调栈+set

    [BZOJ4453]cys就是要拿英魂! Description pps又开始dota视频直播了!一群每天被pps虐的蒟蒻决定学习pps的操作技术,他们把pps在这局放的技能记录了下来,每个技能用一个 ...

  6. python中的特殊用法

    1 别名 from xxx import xxx as xxx;

  7. mysqldump的--master-data参数

    mysqldump导出数据时,当这个参数的值为1的时候,mysqldump出来的文件就会包括CHANGE MASTER TO这个语句,CHANGE MASTER TO后面紧接着就是file和posit ...

  8. smartforms 二维码打印

    1. 安装TBarCode_SAPwin软件 1) 下载Barcode软件  下载TBarCode_SAPwin 软件.(如需生成SAP"字符控制序列"则需一并下载TBarCode ...

  9. entity framework WithRequiredDependent和WithRequiredPrincipal

    A->WithRequiredDependent->B 表示 A中包含B的不为null实例 ,A是主键实体  B是外键实体 A->WithRequiredPrincipal-> ...

  10. 我所理解的RESTful Web API [Web标准篇]【转】

    原文:http://www.cnblogs.com/artech/p/restful-web-api-01.html REST不是一个标准,而是一种软件应用架构风格.基于SOAP的Web服务采用RPC ...