1.事件流定义

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

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

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

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

2.举个栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件流</title>
  6. <style>
  7. div{width: 300px;height: 300px;background: darkcyan;}
  8. section{width: 200px;height: 200px;background: orange;}
  9. p{width: 100px;height: 100px;background:tomato;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="grandfather">
  14. 爷爷
  15. <section id="father">
  16. 爸爸
  17. <p id="son">儿子</p>
  18. </section>
  19. </div>
  20. </body>
  21. <script>
  22. var grand = document.getElementById('grandfather'),
  23. father = document.getElementById('father'),
  24. son = document.getElementById('son');
  25. son.onclick = function(){
  26. alert('son');
  27. }
  28. father.onclick = function(){
  29. alert('father');
  30. }
  31. grand.onclick = function(){
  32. alert('grand');
  33. }
  34.  
  35. </script>
  36. </html>

执行结果如下:(先后弹出son,father,grand界面)

在冒泡型事件流中click事件传播顺序为div=>body=>html=>document

在捕获型事件流中click事件传播顺序为document=>html=>body=>div

如图:

注意:

注意:

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

  • IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。
  • IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

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

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

DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段:实际目标(<div>)在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>再到<body>就停止了。

处于目标阶段:事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分

冒泡阶段:事件又传播回文档。

DOM2级事件 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数,分别为:事件名称(String)、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)

由上图可知,捕获过程要先于冒泡过程。

第三个参数就是是否支持事件捕获,true支持事件捕获,false支持事件冒泡。

js事件(一)之事件流的更多相关文章

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

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

  2. js:事件(注册、解绑、DOM事件流、事件对象、事件委托)

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  3. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  4. DOM事件揭秘-事件流

    事件:文档/窗口中发生的特定的交互瞬间 瀑布流,图片轮播 动作都是通过事件触发的 课程内容: 1,理解事件流 2,使用时间处理程序 3,不同的事件类型 ie4.0以后, 事件流:描述的是从页面中接收事 ...

  5. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  6. JS事件(事件冒泡和事件捕获)

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  7. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  8. javascript 事件编程之事件(流,处理,对象,类型)

    1. 事件处理 1.1. 绑定事件方式 1)行内绑定 语法: //最常用的使用方式 <元素 事件="事件处理程序"> 2)动态绑定 //结构+样式+行为分离的页面(ht ...

  9. js中事件冒泡,事件捕获详解

    一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...

  10. python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

随机推荐

  1. angularjs compile和link

    原文:http://www.cnblogs.com/GoodPingGe/p/4361354.html ************************************************ ...

  2. 前端学习 第七弹: Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  3. Windows环境下安装pip,方便你的开发

    1.在以下地址下载最新的PIP安装文件:http://pypi.python.org/pypi/pip#downloads 2.解压安装 3.下载Windows的easy installer,然后安装 ...

  4. (转)网上总结的 NIPS 201 参会感受

    1. http://www.machinedlearnings.com/2016/12/nips-2016-reflections.html 2. http://blog.arpitmohan.com ...

  5. linux 删除进程的多种方法

    kill pid kill -9 pid kill -15 pid pkill -f *.php kill -s 9 pid

  6. Yii2安装搭建和将入口文件移到根目录

    用Composer下载Yii2速度太慢了,所以我还是喜欢下载打包好的框架文件. 在https://github.com/yiisoft/yii2/releases 下载最新的的Yii2,advance ...

  7. PHP 获取指定目录下所有文件(包含子目录)

    PHP 获取指定目录下所有文件(包含子目录) //glob — 寻找与模式匹配的文件路径 $filter_dir = array('CVS', 'templates_c', 'log', 'img', ...

  8. Ajax服务请求原理 简单总结

    刚开始以为Ajax是一种新的语言,接触之后才知道,ajax是用于服务器交换数据并更新部分网页的Web应用程序的技术. 第一次看到Ajax请求代码时,感觉一脸萌逼,这些代码竟然把后台数据请求过来了,神奇 ...

  9. ubuntu 更换系统语言,Change System Language

    1.打开设置,打开“Language Support”. 2.如果列表中没有你的语言,点击“Install/Remove Language”,下拉选择你的语言,点击“Apply Changes”. 3 ...

  10. 自己修改的两个js文件

    sea-base.js /** * Sea.js 2.2.3 | seajs.org/LICENSE.md */ (function(global, undefined) { // Avoid con ...