理解JavaScript中的事件流
原文地址：http://my.oschina.net/sevenhdu/blog/332014
目录[-]
当浏览器发展到第四代时（IE4和Netscape Communicator 4）,浏览器团队遇到一个很有意思的问题：页面的哪一部分会拥有特定的事件？想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，那么同时你也单击了按钮的容器元素，甚至整个页面。
事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。
事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。看下面的例子
点击按钮，那么这个click事件会按照这样传播：
<input>
<div>
<body>
<html>
document
所有现代浏览器都支持事件冒泡，但在具体实现上有一些差别。IE5.5及更早版本中的事件冒泡会跳过<html>元素（从<body>直接跳到document）。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。
事件捕获
Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：
document
<html>
<body>
<div>
<input>
虽然事件捕获是Netscape唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。但由于老版本的浏览器不支持，因此很少有人使用事件捕获。
DOM事件流
"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。以前面的例子，则会按下图顺序触发事件。
在DOM事件流中，事件的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到div后就定停止了。下一个阶段是处于目标阶段，于是事件在input上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回document。
多数支持DOM事件流的浏览器都实现了一种特定的行为；即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上操作事件。 看如下例子。
这个Demo的结果，应该很清楚了吧。
理解JavaScript中的事件流的更多相关文章
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 再次理解javascript中的事件
一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 + 事件冒泡接收事件的顺序:
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- 理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件 ...
- 理解JavaScript中的事件轮询
原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...
- JavaScript 中的事件流和事件处理程序（读书笔记思维导图）
JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- javascript中标准事件流addEventListener介绍
addEventListener-开始 前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形式从头到尾再写一篇. addEve ...
- 理解DOM中的事件流
浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- Android通过NTP服务器取得UTC标准时间
1. http://hi-android.info/src/android/net/SntpClient.java.html 利用这个类调用NTP函数. 2. 通过函数client.requestTi ...
- Linux 用户篇——用户管理的配置文件
一.用户管理之配置文件的重要性 在Linux系统中,用户账户的相关信息是存放在相关配置文件中.而Linux安全系统的核心是用户账号,用户对系统中各种对象的访问权限取决于他们登录系统时用的账户,并且Li ...
- Python/Anaconda多版本共存的解决方案
博客中的文章均为 meelo 原创,请务必以链接形式注明 本文地址 虽然Python2大势已去,众多项目都已经支持Python3,但总有一些教程和项目只支持Python2.通常情况是计算机里既装着Py ...
- PHP原理之变量
作者: Laruence( ) 本文地址: http://www.laruence.com/2008/08/22/412.html 转载请注明出处 或许你知道,或许你不知道,PHP是一个弱类型,动 ...
- 转：一步一步学ROP之linux_x86篇 - 蒸米
原文地址:http://drops.wooyun.org/tips/6597 0×00 序 ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击 ...
- 【转载】Xutils3源码解析
Github源码地址:https://github.com/wyouflf/xUtils3 原文地址 :http://www.codekk.com/blogs/detail/54cfab086c476 ...
- LCA:倍增与tarjan
学了好久(一两个星期)都没彻底搞懂的lca,今天总算理解了.就来和大家分享下我自己的心得 首先,如果你还不懂什么是lca,出门左转自行百度 首先讲倍增 倍增的思想很简单,首先进行预处理,用一个深搜将每 ...
- FileBuffer-ImageBuffer 模拟PE
这节课的重点是:模拟PE加载过程,按照运行的要求给FileBuffer拉伸放到内存当中,从 FileBuffer 到 ImageBuffer 再到 运行Buffer. PE 加载 过程: 根据si ...
- MYSQL注入天书之前言
写在前面的一些内容 请允许我叨叨一顿: 最初看到sqli-labs也是好几年之前了,那时候玩了前面的几个关卡,就没有继续下去了.最近因某个需求想起了sqli-labs,所以翻出来玩了下.从每一关卡的娱 ...
- Visitor设计模式
我猜想许多人都知道访问者设计模式,这种模式在“四人帮”的那本可复用面向对象软件基础的书被描述过.这个模式自身其实一点也不复杂(和以往的其他设计模式一样). 如上图所示: 我知道这个模式很久了,但是我 ...