事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。

事件是javaScript和DOM之间的桥梁。

你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。

典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。

IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。

JS事件流理解的更多相关文章

  1. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  2. js事件流机制冒泡和捕获

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...

  3. JS事件流模型

    JS事件流模型 事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式. 事件冒泡E ...

  4. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  5. js的事件流理解

    面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚. 事件捕获和事件冒泡 事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流主要分为两种,即事件捕获和事 ...

  6. JS事件流（W3C与IE区别）

    一.JS事件的3个阶段:捕获.目标.冒泡,低版本IE不支持捕获阶段: 二.在浏览器解析事件的时候,有两种触发方式:一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获). 冒泡的方式 ...

  7. JS——事件流与事件处理程序

    1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流1.2 Netscape :事件捕获1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段DOM2级事件规定 :捕获阶段不会 ...

  8. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  9. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

随机推荐

  1. BZOJ 2705 [SDOI2012]Longge的问题 ——Dirichlet积

    [题目分析] 狄利克雷卷积. 然后直接求出欧拉函数,计算和即可. [代码] #include <cstdio> #include <cstring> #include < ...

  2. ASP.NET脚本过滤-防止跨站脚本攻击[转]

    ASP.Net 1.1后引入了对提交表单自动检查是否存在XSS(跨站脚本攻击)的能力.当用户试图用<xxxx>之类的输入影响页面返回结果的时候,ASP.Net的引擎会引发一个HttpReq ...

  3. mysql 省市联动sql 语句

    /*MySQL Data TransferSource Host: localhostSource Database: virgoTarget Host: localhostTarget Databa ...

  4. 一种新的隐藏-显示模式诞生——css3的scale(0)到scale(1)

    .dropdown-menu {  background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;  box-shadow: 0 1px 2 ...

  5. pandas 按照列A分组，将同一组的列B求和,生成新的Dataframe

    对于pandas中的Dataframe,如果需要按照列A进行分组,将同一组的列B求和,可以通过下述操作完成: df = df.groupby(by=['column_A'])['column_B']. ...

  6. 6.UDP协议

    1.UDP简要介绍 UDP是传输层协议,和TCP协议处于一个分层中,但是与TCP协议不同,UDP协议并不提供超时重传,出错重传等功能,也就是说其是不可靠的协议. UDP数据报结构: UDP首部格式: ...

  7. 笔记整理——linux

    linux文件目录介绍 (2015/4/30 19:20:28)              /proc 目录中的主要文件的说明 文件或目录名称 描 述 apm 高级电源管理信息 cmdline 这个文 ...

  8. Vue 响应式总结

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...

  9. jquery proxy

    slice = Array.prototype.slice,// Bind a function to a context, optionally partially applying any // ...

  10. 5分钟了解MySQL5.7的Online DDL雷区

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1855872 Part ...