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. 【TensorFlow-windows】(七) CNN之VGG-net的测试

    主要内容: 1.CNN之VGG-net的测试 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_64.exe (当时TF还不 ...

  2. HDU 6208 The Dominator of Strings 后缀自动机

    The Dominator of Strings Time Limit: 3000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java ...

  3. EasyNVR实现海康、大华NVR硬盘录像机Web无插件播放方案（支持取特定时间段视频流）

    本文转自:https://blog.csdn.net/black_3717/article/details/79872725 背景说明: 由于视频自身的直观性和便利性,对于传统安防行业,摄像机的直播和 ...

  4. 关于eclipse 插件的挂载

    学习java的时候,不喜欢myeclipse 这种插件,什么都准备好了,自己动手就少了,不利于自己学习,现在我就diy 自己选几个插件来用,基本上就是 eclipse 加上我自己要用的插件,插件的安装 ...

  5. opencv的x64库的版本和vs的版本的对应关系

    1 关于vs的版本 visual studio是一个集成开发环境,而vc++是一个c++的compiler,vc++有一个版本和一个版本号,vs也有一个版本,它们的对应关系如下: MSVC++ 4.x ...

  6. ADAS

    1 什么是ADAS advanced driver assistance system,即高级驾驶员辅助系统.是基于车上各种传感器的应用,如摄像头.雷达.激光器等. 2 ADAS的构成部分 2.1 a ...

  7. wepy error Parsing error: Unexpected token :

    mpBMCwepy\wepy.config.js eslint  信息 全局重装wepy-clinpm install wepy-cli -g -registry=https://registry.n ...

  8. formData.append("username", "Groucho"); input 文件大小

    formData.append("username", "Groucho"); https://developer.mozilla.org/en-US/docs ...

  9. linux批量更改权限

    用命令 sudo chmod 777 -Rfv /home/name/* 注释:1.777 为 要修改成 的 文件的 权限:2.-R 是 子目录 下的 文件 也修改:3.-f 强制:4. -v是 显示 ...

  10. LeetCode：N叉树的最大深度【559】

    LeetCode:N叉树的最大深度[559] 题目描述 给定一个N叉树,找到其最大深度. 最大深度是指从根节点到最远叶子节点的最长路径上的节点总数. 例如,给定一个 3叉树 : 我们应返回其最大深度, ...