原文地址：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. ifconfig与内核通信 ifreq 结构体分析和使用

    结构原型: /* * Interface request structure used for socket * ioctl's.  All interface ioctl's must have p ...

  2. Error: could not open `C:\Java\jre7\lib\i386\jvm.cfg

    打开eclipse时出现Error: could not open `C:\Program Files\Java\jre7\lib\i586\jvm.cfg’) 删除 c:\windows\syste ...

  3. Elasticsearch分片&副本分配

    集群索引中可能由多个分片构成,并且每个分片可以拥有多个副本,将一个单独的索引分为多个分片,可以处理不能在单一服务器上运行的 大型索引. 由于每个分片有多个副本,通过副本分配到多个服务器,可以提高查询的 ...

  4. git - git命令中文显示乱码

    使用git add添加要提交的文件的时候,如果文件名是中文,会显示形如897\232\350\256...的乱码,解决办法:   git config --global core.quotepath ...

  5. 【Mac】【已解决】连接Android机器提示“此电脑不能读取您插入的磁盘”

    出现的报错提示页面截图如下: 解决方案: 下载“Android File Transfer.dmg”安装在Mac. 打开USB调试,连接手机即可读取手机磁盘.   下载链接:https://www.t ...

  6. thinkphp5.0读取配置

    读取配置参数 设置完配置参数后,就可以使用get方法读取配置了,例如: echo Config::get('配置参数1'); 系统为get方法定义了一个助手config,以上可以简化为: echo c ...

  7. axios请求数据

    1.安装axios模块 import axios from 'axios'; //安装方法 npm install axios //或 bower install axios 2.引入模块 直接引用: ...

  8. Windows 如何远程登陆 Server 的 jupyter

    jupyter 安装就不用赘述了,本示例以 Putty 为例,展示如何从本地 windows 系统调用远程的 jupyter notebook 并且在本地 Chrome 中打开的方法 1. 首先,ss ...

  9. linux——(4)磁盘与文件系统管理

    概念一:linux-ext2文件系统 ext2在分区的时候会分成多个组块(block group)和一个启动扇区(boot sector),每一个组块内又有superblock.File system ...

  10. 加密url

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 可以采用 https 证书 双向 加密验证. 加密到 JNI 里面,还是可以通过抓包工具 ...