理解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),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- 最全Pycharm教程（26）——Pycharm搜索导航之文件名、符号名搜索（转）
1.准备一个工程 向你的工程中添加一个Python文件,并输入一些源码,例如: 2.转到对应文件.类.符号 Pycharm提供的一个很强力的功能就是能够根据名称跳转到任何文件.类.符号所在定义位置. ...
- C++大数据处理
转:http://blog.csdn.net/v_july_v/article/details/7382693 作者:July出处:结构之法算法之道blog 前言 一般而言,标题含有“秒杀”,“99% ...
- 记一次前端问题解决历程(Cannot read Property 'call' of undefined)
场景 echosong 回长沙两个多月了, 新公司的创业项目 App , 小程序, 公众号. 目前差app 没有 做完. 公众号在前端小美女同事 的主导下采用前端比较火的Vue 技术框架. 一直一来主 ...
- grep 同时排除多个关键字
不说废话, 例如需要排除 abc.txt 中的 mmm nnn grep -v 'mmm\|nnn' abc.txt 再举个例子,需要确定mac 的本机ip地址, 显然直接可以输入 ifcon ...
- OOD沉思录 --- 类和对象的关系 --- 使用关系原则
4.1 尽量减少类的协作的数量,即减少使用者和被使用者的数量. 协作意味着一定程度的耦合,但是完全没有协作的类也是没有意义的,最多只能作为一个库使用. 通过抽象,依赖接口,可以最大程度减少依赖的实现类 ...
- URAL 1994 The Emperor's plan
期望$dp$. $dp[i][j]$表示第$1$种人有$i$个,第$2$种人有$j$个的情况下,到达目标状态的期望值.初始化$dp[i][0]=i$. 枚举一下这个状态死多少人,取个$max$,最后$ ...
- java 读入文件 BufferedReader
package com.mkyong; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOExcep ...
- RxSwift 系列(一)
为什么使用RxSwift? 我们编写的代码绝大多数都涉及对外部事件的响应.当用户点击操作时,我们需要编写一个@IBAction事件来响应.我们需要观察通知,以检测键盘何时改变位置.当网络请求响应数据时 ...
- Redis学习篇（二）之Hash类型及其操作
HSET 作用: 将哈希表key中的域field设置成指定的value 语法:HSET key field value HSET userinfo name 'zhangsan' HSET useri ...
- 安卓 onTouch OnTouchEvent onChick 顺序
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 分发触摸事件 -> 在 触摸 时候 -> 在触摸事件时候->在点击时候 ...