js事件(一)之事件流
1.事件流定义
事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。
事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。
冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
2.举个栗子
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>事件流</title>
- <style>
- div{width: 300px;height: 300px;background: darkcyan;}
- section{width: 200px;height: 200px;background: orange;}
- p{width: 100px;height: 100px;background:tomato;}
- </style>
- </head>
- <body>
- <div id="grandfather">
- 爷爷
- <section id="father">
- 爸爸
- <p id="son">儿子</p>
- </section>
- </div>
- </body>
- <script>
- var grand = document.getElementById('grandfather'),
- father = document.getElementById('father'),
- son = document.getElementById('son');
- son.onclick = function(){
- alert('son');
- }
- father.onclick = function(){
- alert('father');
- }
- grand.onclick = function(){
- alert('grand');
- }
- </script>
- </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事件(一)之事件流的更多相关文章
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- js:事件(注册、解绑、DOM事件流、事件对象、事件委托)
1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- DOM事件揭秘-事件流
事件:文档/窗口中发生的特定的交互瞬间 瀑布流,图片轮播 动作都是通过事件触发的 课程内容: 1,理解事件流 2,使用时间处理程序 3,不同的事件类型 ie4.0以后, 事件流:描述的是从页面中接收事 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- JS事件(事件冒泡和事件捕获)
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- javascript 事件编程之事件(流,处理,对象,类型)
1. 事件处理 1.1. 绑定事件方式 1)行内绑定 语法: //最常用的使用方式 <元素 事件="事件处理程序"> 2)动态绑定 //结构+样式+行为分离的页面(ht ...
- js中事件冒泡,事件捕获详解
一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
随机推荐
- angularjs compile和link
原文:http://www.cnblogs.com/GoodPingGe/p/4361354.html ************************************************ ...
- 前端学习 第七弹: Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- Windows环境下安装pip,方便你的开发
1.在以下地址下载最新的PIP安装文件:http://pypi.python.org/pypi/pip#downloads 2.解压安装 3.下载Windows的easy installer,然后安装 ...
- (转)网上总结的 NIPS 201 参会感受
1. http://www.machinedlearnings.com/2016/12/nips-2016-reflections.html 2. http://blog.arpitmohan.com ...
- linux 删除进程的多种方法
kill pid kill -9 pid kill -15 pid pkill -f *.php kill -s 9 pid
- Yii2安装搭建和将入口文件移到根目录
用Composer下载Yii2速度太慢了,所以我还是喜欢下载打包好的框架文件. 在https://github.com/yiisoft/yii2/releases 下载最新的的Yii2,advance ...
- PHP 获取指定目录下所有文件(包含子目录)
PHP 获取指定目录下所有文件(包含子目录) //glob — 寻找与模式匹配的文件路径 $filter_dir = array('CVS', 'templates_c', 'log', 'img', ...
- Ajax服务请求原理 简单总结
刚开始以为Ajax是一种新的语言,接触之后才知道,ajax是用于服务器交换数据并更新部分网页的Web应用程序的技术. 第一次看到Ajax请求代码时,感觉一脸萌逼,这些代码竟然把后台数据请求过来了,神奇 ...
- ubuntu 更换系统语言,Change System Language
1.打开设置,打开“Language Support”. 2.如果列表中没有你的语言,点击“Install/Remove Language”,下拉选择你的语言,点击“Apply Changes”. 3 ...
- 自己修改的两个js文件
sea-base.js /** * Sea.js 2.2.3 | seajs.org/LICENSE.md */ (function(global, undefined) { // Avoid con ...