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. x86 的 TSS 任务切换机制

    转自:http://blog.chinaunix.net/uid-587665-id-2732907.html [0]写在前面 segment descriptors 构建保护模式下的最基本.最根本的 ...

  2. Java知识点梳理——泛型

    1.定义:泛型的本质是参数化类型,就是将类型由原来的具体的类型参数化,这种参数类型可以用在类.接口.方法中,分别称为泛型类.泛型接口.泛型方法: 2.泛型类:泛型类的声明和非泛型类的声明类似,除了在类 ...

  3. Grunt学习笔记【5】---- expand使用方法

    本文主要讲expand使用方法. 当你希望处理大量的单个文件时,这里有一些附加的属性可以用来动态的构建一个文件列表.这些属性都可以用于 Compact 和 Files Array 文件映射格式. ex ...

  4. 在pycharm中执行脚本没有报错但输出显示Redirection is not supported.

    没有新式语法错误,但是输出显示Redirection is not supported.(不支持重定向) 在stockflow中找到是因为从IDE中运行脚本的原因,比如pycharm,所有IDE都提供 ...

  5. nokogiri

    Nokogiri的用法我推荐三篇非常给力的文章:http://ruby.bastardsbook.com/chapters/html-parsing/http://ruby.bastardsbook. ...

  6. oracle 数据库常用数据表操作

    在oracle中创建sequence CREATE SEQUENCE sequence名称 MINVALUE 1 MAXVALUE 9999999999999999999999999999 INCRE ...

  7. 如何去掉ArrayList重复的id

    今天,也同样跟你一样寻找这个问题的解决办法, 如何去掉ArrayList重复的id 百度中找到这么一句话,为什么想到要去掉呢?为什么不反过来想,我在往ArrayList里添加的时候不让重复的项加入呢? ...

  8. (2)struts2配置祥解

    struts工作流程 反射 : 1.构造对象使用构造器 //类似为Servlet public class AddAction { public AddAction(){ System.out.pri ...

  9. python读取文件后切片

    from itertools import islice with open(“1.txt") as f: for a in islice(f,0,2): print(a)

  10. BZOJ 1370 [Baltic2003]Gang团伙：并查集【虚点】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1370 题意: 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: (1)我 ...