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. OpenCV 中的三大数据类型：CvMat 类型

    前言 本文将介绍 OpenCV 中的矩阵结构 CvMat 并提供几个很常用的矩阵使用方法. 更多的矩阵处理函数还请参阅相关资料. CvMat 的类型定义 typedef struct CvMat { ...

  2. ASP.NET RemoteAttribute远程验证更新问题

    create时使用remote特性没有任何问题, update时,问题就大了,验证唯一性时需要排除自身,如果使用这个特性将无法正确的验证. 改进思路:将自动生成的标签属性改为手写,,并在url上面加上 ...

  3. tomcat+java 占cpu 调试【top命令应用】

    原文出处:http://www.blogjava.net/hankchen 现象: 在tomcat中部署java的web应用程序,过一段时间后出现tomcat的java进程持续占用cpu高达100%, ...

  4. Socket的错误码和描述

    //下面是Socket Error的错误码和描述: Socket error 0 - Directly send error  Socket error 10004 - Interrupted fun ...

  5. 怎么利用Aspose.Cells 获取excel 数据表中sheet的名称

    说明:开发环境 vs2012 asp.net mvc4 c# 利用Aspose.Cells 获取Excel数据表的sheet的名称,并把获取的名称赋值给easyUI 的combobox 1.运行效果 ...

  6. 九度OJ 1145：Candy Sharing Game（分享蜡烛游戏） （模拟）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:248 解决:194 题目描述: A number of students sit in a circle facing their teac ...

  7. 远程服务器上的weblogic项目管理（二）发布完成后如何重启weblogic容器

    前面说到了每次更新服务器项目的java文件与配置文件后,需要更新weblogic容器以完成更新加载,下面来说说如何更新weblogic容器: 第一种方法可以通过ssh shell client工具直接 ...

  8. 【题解】NOI2015软件包管理器

    [题解][P2146 NOI2015]软件包管理器 实际上就是树链剖分板子题. 对于\(install\)操作,直接查询它到\(0\)节点有多少已经安装了的,再用总数减去它. 对于\(uninstal ...

  9. yun 安装mysql

    1.安装客户端和服务器端 确认mysql是否已安装: yum list installed mysql* rpm -qa | grep mysql* 查看是否有安装包:   yum list mysq ...

  10. linux删除目录下所有文件，但是保留文件夹

    删除目录和子目录下所有rpm文件,但是保留文件夹,先cd到想要删除的目录 命令如下 find ./ -name "*.rpm" | xargs rm