原文地址：http://my.oschina.net/sevenhdu/blog/332014

目录[-]

当浏览器发展到第四代时（IE4和Netscape Communicator 4）,浏览器团队遇到一个很有意思的问题：页面的哪一部分会拥有特定的事件？想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，那么同时你也单击了按钮的容器元素，甚至整个页面。

事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。看下面的例子

点击按钮，那么这个click事件会按照这样传播：

  1. <input>

  2. <div>

  3. <body>

  4. <html>

  5. document

所有现代浏览器都支持事件冒泡，但在具体实现上有一些差别。IE5.5及更早版本中的事件冒泡会跳过<html>元素（从<body>直接跳到document）。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

事件捕获

Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：

  1. document

  2. <html>

  3. <body>

  4. <div>

  5. <input>

虽然事件捕获是Netscape唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。但由于老版本的浏览器不支持，因此很少有人使用事件捕获。

DOM事件流

"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。以前面的例子，则会按下图顺序触发事件。

在DOM事件流中，事件的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到div后就定停止了。下一个阶段是处于目标阶段，于是事件在input上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回document。

多数支持DOM事件流的浏览器都实现了一种特定的行为；即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上操作事件。  看如下例子。

这个Demo的结果，应该很清楚了吧。

理解JavaScript中的事件流的更多相关文章

  1. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  2. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序:

  3. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  4. 理解javascript中的事件模型

    javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一.  DOM0级事件模型 DOM0级事件模型是早期的事件 ...

  5. 理解JavaScript中的事件轮询

    原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...

  6. JavaScript 中的事件流和事件处理程序（读书笔记思维导图）

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...

  7. 理解Javascript中的事件绑定与事件委托

    最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   ...

  8. javascript中标准事件流addEventListener介绍

    addEventListener-开始 前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形式从头到尾再写一篇. addEve ...

  9. 理解DOM中的事件流

    浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...

随机推荐

  1. ireport报表制作， 通过节点、产品类型来判断，当该节点审核通过之后，报表相对应的审核意见及签名 显示相对应的内容

    1.代码①  (与本内容相关的代码:7~36)           以下类似 $P{P_XXXX} :均为页面端的传入参数 select so.sale_order_no as sale_order_ ...

  2. Linux 基础目录和命令

    Linux 标准目录结构   初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存 ...

  3. HDU 1024 Max Sum Plus Plus（dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1024 题目大意:有多组输入,每组一行整数,开头两个数字m,n,接着有n个数字.要求在这n个数字上,m块 ...

  4. cin关闭同步[转]

    很多人会说cin的速度比scanf慢很多, 其实不然. cin慢的原因主要在于默认cin与stdin总是保持同步, 这一步是消耗时间大户. 只需要加上ios::sync_with_stdio(fals ...

  5. 在go中连接mysql

    5.访问数据库 5.1 database/sql接口 5.2 使用MySQL数据库 5.3 使用SQLite数据库 5.4 使用PostgreSQL数据库 5.5 使用Beego orm库进行ORM开 ...

  6. IEEEXtreme 10.0 - Flower Games

    这是 meelo 原创的 IEEEXtreme极限编程比赛题解 题目来源 第10届IEEE极限编程大赛 https://www.hackerrank.com/contests/ieeextreme-c ...

  7. Firefox 火狐 页面特殊符号乱码解决方法

    这是由于字体问题导致的. 解决方法,参照下图设置,重点是红色标注区域.衬线字体务必选择兼容性最好的,比如思源黑体.宋体.

  8. C++ 字符串基本操作

    C++ 规定,不能直接进行数组名的赋值,因为数组名是一个常量,而结构类型的变量可以赋值,不同结构体的变量不允许相互赋值,即使这两个变量可能具有相同的成员.在程序中不能同时出现无参构造函数和带有全部默认 ...

  9. Spring Cloud Config 使用总结

    Spring Cloud Config 使用总结 源码 https://github.com/ChangMuChen/Spring-Boot/tree/master/studies/sourcecod ...

  10. Java 8中你可能没听过的10个新特性

    lambda表达式,lambda表达式,还是lambda表达式.一提到Java 8就只能听到这个,但这不过是其中的一个新功能而已,Java 8还有许多新的特性——有一些功能强大的新类或者新的用法,还有 ...