浅谈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)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
随机推荐
- 【LeetCode】String Without AAA or BBB(不含 AAA 或 BBB 的字符串)
这道题是LeetCode里的第984道题. 题目要求: 给定两个整数 A 和 B,返回任意字符串 S,要求满足: S 的长度为 A + B,且正好包含 A 个 'a' 字母与 B 个 'b' 字母: ...
- vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts < ...
- BZOJ 3566 [SHOI2014]概率充电器 ——期望DP
期望DP. 补集转化,考虑不能被点亮的情况, 然后就是三种情况,自己不能亮,父亲不能点亮它,儿子不能点亮它. 第一次计算比较容易,第二次计算的时候需要出去第一次的影响,因为一条线只能传导一次 #inc ...
- [图论训练]BZOJ 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路【floyd】
Description 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一 张藏宝图上说,如果他的路程上 ...
- 【（最小权点基）tarjan强连通分量缩点+tarjan模板】HDU 5934 Bomb
[AC] #include<bits/stdc++.h> using namespace std; typedef long long ll; int n; ; ; const int i ...
- c++ primer note
---恢复内容开始--- 1.decltype 2.auto 3.cbegin 4.cend 5.constexpr 6.(*Parray)[10]=&arr; //Parray 指向一个含有 ...
- 【Codeforces Round #502 (Div. 1 + Div. 2) 】
A:https://www.cnblogs.com/myx12345/p/9843032.html B:https://www.cnblogs.com/myx12345/p/9843050.html ...
- hdu 4961 数论 o(nlogn)
Boring Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Tot ...
- ajax 提交数组，mybatis 数组接受
function jinxingzhong() { // 配送单编号:psd2017090103 var divHtml = ""; $.ajax({ type: "PO ...
- android实现通知栏消息
一.原理 消息推送有两种,一种是客户端定时直接到服务器搜索消息,如果发现有新的消息,就获取消息下来:另一种是服务器向客户端发送消息,也就是当有信息消息时,服务器端就会向客户端发送消息. 二.步骤(代码 ...