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. 【转】win7 任务计划 任务映像已损坏或篡改（异常来自HRESULT:0x80041321）

    请这样操作:1. 以管理员身份运行命令提示符并执行命令chcp 437schtasks /query /v | find /i "ERROR: Task cannot be loaded:& ...

  2. go test 上篇

    前言 Go语言本身集成了轻量级的测试框架,由go test命令和testing包组成.包含单元测试和压力测试,是保证我们编写健壮Golang程序的有效工具. 演示环境 $ uname -a Darwi ...

  3. Html控件和Web控件（转）

    作为一名ASP.NET的初学者,了解并且区别一些混淆概念是很必须的,今天这篇博文 就是主要向大家介绍一下Html控件和Web控件.在ASP.net中,用户界面控件主要就是 Html控件和Web控件,在 ...

  4. jQuery学习笔记(7)--表格展开关闭

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. 九度OJ 1168：字符串的查找删除 （查找）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4276 解决:1699 题目描述: 给定一个短字符串(不含空格),再给定若干字符串,在这些字符串中删除所含有的短字符串. 输入: 输入只有1 ...

  6. 九度OJ 1033：继续xxx定律 （基础题）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4987 解决:1201 题目描述:     当n为3时,我们在验证xxx定律的过程中会得到一个序列,3,5,8,4,2,1,将3称为关键数, ...

  7. DAICO模式到底是什么？

    自从V神提出DAICO以来,已经有项目围绕DAICO模式落地,但是DAICO到底是什么呢? 所谓DAIC0,其实就是DAO+IC0. DAO是DistributedAutonomous Organiz ...

  8. memcache-session-manager（flexjson）

    MSM项目FlexJson序列化参考文档. 序号(步骤) 需求描述 jar包列表: spymemcached-2.11.1.jar memcached-session-manager-tc8-1.8. ...

  9. （转）source insight 窗口嵌入

    昨天用了一下source insight ,都说很强大,也有感觉,但是这个强大的东西往往不是那么容易弄清楚的,或者一下子就好上手的,工具强大,功能复杂多样,一开始不知道怎么入手,以后慢慢来吧,学习是要 ...

  10. manacher小结

    P3805 [模板]manacher算法 题目大意 n个字符组成的字符串,求最长回文串 $O$$($$n^3$$)$ 枚举两端点,暴力往中间搜 $O$$($$n^2$$)$ 枚举回文串终点,暴力往两边 ...