浅谈JavaScript的事件（事件流）
事件流描述的是从页面中接收事件的顺序。IE的事件流失事件冒泡，而Netspace的事件流失事件捕获。
- 事件冒泡
IE的事件流叫事件冒泡，即事件开始时，由具体的元素（文档中嵌套层次最深的节点）接收，然后向上传播到不具体的节点。
<html onclick="console.log('html')">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onclick="console.log('body')">
<div id="aa" onclick="console.log('div');" style="width: 100px;">2222</div>
</body>
</html>
上面的代码中，如果单击了div，则事件会按照div、body、html的顺序执行。也就是说事件首先发生了div上，而div也就是我们单击的元素。然后事件按照dom向上传播，直至传播到document对象。所有浏览器都支持事件冒泡。
function stopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
}
else{
window.event.cancelBubble=true;
}
}
通过上面的stopBubble函数能够阻止事件的冒泡。上面的写法兼容了ie和非ie浏览器。
- 事件捕获
事件捕获的思想是不太具体的节点先接收到事件，最具体的节点最后接收到事件。事件捕获的用意在于事件到达最终的节点前，就可以捕获。如果以前面的例子，则事件发生的顺序为document、html、body和div。
- DOM事件流
事件流包含三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为事件的截获提供了机会。然后是实际目标接收到事件。最后一个是事件冒泡阶段，可以在这这个阶段对事件作出响应。
在dom事件流中，具体元素div在捕获阶段不会获取到事件，这意味着事件从document到html，到body就停止了。下一个阶段处于目标阶段，于是事件在div上面发生，并在事件处理中被看成事件冒泡阶段的一部分。最后事件冒泡发生，并将事件回传到document。ie8以及更早的浏览器不支持Dom事件流。
浅谈JavaScript的事件（事件流）的更多相关文章
- 浅谈JavaScript中的事件
引言 Html页面与JavaScript之间的交互是通过事件来完成的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应的代码.这在传 ...
- 浅谈Javascript单线程和事件循环
单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...
- 浅谈javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
- 浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的正则表达式（适用初学者观看）
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
随机推荐
- Python requests模块params、data、json的区别
json和dict对比 json的key只能是字符串,python的dict可以是任何可hash对象(hashtable type): json的key可以是有序.重复的:dict的key不可以重复. ...
- Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, level by level). For example: Given binary tree {3,9,20,#,#,15,7}, 3 / \ 9 20 / \
class Solution { public: vector<vector<int>> levelOrder(TreeNode* root) { vector<vect ...
- [android开发篇]使用系统权限流程
1 声明权限https://developer.android.com/training/permissions/declaring.html 每款 Android 应用都在访问受限的沙盒中运行.如果 ...
- 一堆Offer怎么选？这样做就不纠结了
有个朋友,工作了10年左右,春节后换工作,拿了三个Offer(西安): 通信行业的一家研究所,软件开发工程师,月薪7K,承诺有月奖金.年终奖金 一家做大数据的公司,软件开发工程师,月薪15K,13薪 ...
- POJ 1606 Jugs
Jugs Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4280 Accepted: 2533 Special Ju ...
- jenkins之Tomcat7+jdk1.7+jenkins
目的 在开发中,需要经常频繁的对测试服务器进行部署,而且在多人协同中开发经常遇到的问题就是别人更新了他的代码,而你去更新你的代码时并没有更新到别人的代码,导致测试环境的代码不是最新,当然这个问题也好解 ...
- 【Luogu】P3455Zip-Queries（莫比乌斯反演）
题目链接 真是神TM莫比乌斯 首先来看一个神奇的结论:求gcd(x,y)==k的对数,其中1<=x<=n,1<=y<=m 等同于求gcd(x,y)==1的对数,其中1<= ...
- [UOJ#122][NOI2013]树的计数
[UOJ#122][NOI2013]树的计数 试题描述 我们知道一棵有根树可以进行深度优先遍历(DFS)以及广度优先遍历(BFS)来生成这棵树的 DFS 序以及 BFS 序.两棵不同的树的 DFS 序 ...
- 转载：C++读取特定路径下文件目录及文件名称
转载地址:http://www.cnblogs.com/tgyf/p/3839894.html void getAllFiles( string path, vector<string>& ...
- Spoj-NPC2015A Eefun Guessing Words
Eefun Guessing Words Eefun is currently learning to read. His way of learning is unique, by trying ...