事件流描述的是从页面中接收事件的顺序。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的事件（事件流）的更多相关文章

  1. 浅谈JavaScript中的事件

    引言 Html页面与JavaScript之间的交互是通过事件来完成的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应的代码.这在传 ...

  2. 浅谈Javascript单线程和事件循环

    单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...

  3. 浅谈javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...

  4. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  5. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  6. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  7. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  8. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  9. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  10. 浅谈JavaScript中的正则表达式（适用初学者观看）

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

随机推荐

  1. c标准库 徐明远 背景基础

    背景基础 1.c语言库用c语言编写   其他语言则不同 早期语言的库是用汇编语言编写的    不同的计算机体系结构有不同的汇编语言   所以在移植性方面差一点   而c语言可以编写出高度可移植性的代码 ...

  2. 也来“玩”Metro UI之磁贴（二）

    继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+浏览器),当然,还是纯CSS,真的要感谢 ...

  3. mysqlbinlog备份和mysqldump备份

    -bash : mysqldump: command not found -bash : mysqlbinlog:command not found 首先得知道mysql命令或mysqldump命令的 ...

  4. 刷题总结——art2（ssoj）

    题目: 题解: o(n)复杂度扫一遍再用一个stack维护就可以了·····mdzz这道题都不会做·· 代码: #include<iostream> #include<cstdio& ...

  5. 刷题总结——火柴排队（NOIP2013）

    题目: 题目背景 NOIP2013 提高组 Day1 试题 题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间 ...

  6. 算法复习——单调队列(sliding windows,ssoi）

    题目: 题目描述 给你一个长度为 N 的数组,一个长为 K 的滑动的窗体从最左移至最右端,你只能见到窗口的 K 个整数,每次窗体向右移动一位,如下表:

  7. 洛谷 [T21778] 过年

    离线扫描线+查分+线段树 我们发现,这个题的询问都是离线的,所以我们尝试用离线扫描线的方法来处理 对于每一次操作,我们维护一个差分数组, 在询问的时候,我们用一根扫描线,从左往右扫,并用线段树维护,每 ...

  8. MBP清除NVRAM和PRAM

    Mac 会将某些设置存储在特定的存储区中,即使关机这些设置也不会丢失.在基于 Intel 的 Mac 上,存储位置是称为 NVRAM 的内存:而在基于 PowerPC 的 Mac 上,存储位置则是称为 ...

  9. (2)Swing窗体基本设置

    import javax.swing.*; import javax.swing.plaf.FontUIResource; import java.awt.*; import java.util.En ...

  10. Django 中的时间处理

    操作系统为OS X 10.9.2,Django为1.6.5. 1.时区 在setting.py文件中设置了时区 TIME_ZONE = 'Asia/Shanghai' # 设置时区为UTC+8 USE ...