理解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),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- LightOJ 1410 Consistent Verdicts(找规律)
题目链接:https://vjudge.net/contest/28079#problem/Q 题目大意:题目描述很长很吓人,大概的意思就是有n个坐标代表n个人的位置,每个人听力都是一样的,每人发出一 ...
- LeetCode679. 24 Game
You have 4 cards each containing a number from 1 to 9. You need to judge whether they could operated ...
- Funny Car Racing(最短路变形)
描述 There is a funny car racing in a city with n junctions and m directed roads. The funny part is: e ...
- Linux 基础——压缩解压命令
时间过的真快,周末不会学习Linux,每天就是下班后学习.这周工作很忙,要几天总结一次了. 一.处理数据文件 sort dest:将目标文件的内容进行排序,默认是按字符顺序排序的. sort -n d ...
- 使用 Python 的 sounddevice 包录制系统声音
博客中的文章均为meelo原创,请务必以链接形式注明本文地址 sounddevice是一个与Numpy兼容的录音以及播放声音的包. 安装sounddevice包 直接通过pip就能安装. pip in ...
- 得分（UVa1585）
题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...
- Loadrunner中cookie解释与用法
loadrunner对于cookie的处理loadrunner中与cookie处理相关的常用函数如下: web_add_cookie():添加新的cookie或者修改已经存在的cookie web_r ...
- Windows 10家庭版远程桌面连接错误
由于需要操作远程服务器,经常使用“远程桌面连接”工具,一直很正常.今天突然提示 出现身份验证错误,可能是由于 CredSSP加密Oracle修正.什么情况!! 根据提示的地址https://go.mi ...
- vue表格导出
inportexcel: function() { //兼容ie10哦! require.ensure([], () => { const { export_json_to_excel } = ...
- Mock（模拟后端接口数据）配合Vuex的使用
1.下载Mock cnpm install Mockjs -S 2.新建一个data.js存放新生成的mock文件 编辑mock 并导出 const Mock = require('mockjs' ...