理解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),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- Java的Stack类实现List接口真的是个笑话吗
今天在网上闲逛时看到了这样一个言论,说“Java的Stack类实现List接口的设计是个笑话”. 当然作者这篇文章的重点不是这个,原本我也只是一笑置之,然而看评论里居然还有人附和,说“Ja ...
- Makefile的使用方法
转自:http://blog.chinaunix.net/uid-403164-id-2407545.html 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Wind ...
- 三年.NET即将转Java，我该何去何从
2014年5月,大三报了某培训班5个月学习.NET 2014年12月-2015年6月,在某软件公司实习,用ASP.NET开发企业级系统 2015年7月-2017年3月,从毕业生到成为该公司的主要开发人 ...
- 主流PHP框架性能评测 (引用)
主要涉及到的框架有 CodeIgniter 老品牌易用性框架yaf 鸟哥用c写的php扩展,高性能框架yii 自动生成代码(gii)laravel 号称最优雅的框架swoole framework 支 ...
- 如何解决pytorch 编译时CUDA版本与运行时CUDA版本不对应
转载请注明: 仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ 如何解决pytorch 编译时CUDA版本与运行时CUDA版本不对应 如果pytorch的编译时 ...
- 爱奇艺全国高校算法大赛初赛A
$01$背包. 数据范围:物品个数小于等于$3000$,背包大小小于等于$1000000$. $map<int,long long>dp$,用$map$去做$dp$,可以少遍历很多状态,可 ...
- Android之 广播
(以下内容是阅读郭霖大神的<第一行代码>后自己总结的) 1.概述 广播是Android的四大组件之一. Android的广播机制十分灵活. 2.发送广播 如上图Android的广播主要分为 ...
- hibernate4日志配置
在平时运行程序时控制台有很对的日志打印,本文说明如何控制这些日志打印. 1.确定要使用日志的实现,我在这使用的是log4j. 2.加入log4j的api包slf4j-api.jar,log4j的转换包 ...
- 【BZOJ 2440】 2440: [中山市选2011]完全平方数 （二分+容斥原理+莫比乌斯函数）
2440: [中山市选2011]完全平方数 Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数 ...
- Makefile-命令前的@和-符号
Makefile中命令前的@和-符号如果make执行的命令前面加了@字符,则不显示命令本身而只显示它的结果; Android中会定义某个变量等于@,例如 hide:= @ 通常make执行的命令如果出 ...