javascript的事件流
事件流包括三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
1.事件捕获阶段
现在页面中有一个按钮.
如果单击这个按钮的话,在事件捕获过程中,document会首先接收到click事件,然后沿着DOM树依次向下,一直传播到事件的实际目标input
因为老版本的浏览器不支持事件捕获,所以很少在使用这个事件流.
2.目标阶段:完成了事件捕获,紧接着处于目标阶段,这个时候发生事件了,弹出1(这个阶段非常特别,根据浏览器情况的不同以及调用程序的参数的不同号,在不同的时候执行,没办法把他具体的规划到是在事件捕获阶段执行还是事件冒泡阶段执行.最后干脆自成一派.);
3.事件冒泡阶段:事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播较为不具体的节点(文档).一直传到document.
后补:
从这个图上面来看的话,当我们触发一个事件的时候,那么这个事件处理函数是不是要在捕获阶段被调用一次,然后再冒泡阶段调用一次呢?
IE浏览器是没有事件捕获阶段这个概念的.它只有目标阶段,和事件冒泡阶段,二这个时候目标阶段是可以划归到事件冒泡阶段这个里面来的,因为他是在冒泡阶段触发的.
而现在的高版本浏览器是有事件捕获阶段的.但是默认是不在这个地方经行事件处理的.
那么想要在事件捕获阶段调用事件处理程序,应该如何写呢?
从Dom2开始,有了addEventListener()方法.
var btn = document.getElementById("guo");
btn.addEventListener("click", function () { alert(this.value); }, true);//第三个参数时true,表示触发事件捕获阶段的调用
addEventListener(a,b,c);
第一个参数:事件名
第二个参数:事件的处理程序
第三个参数:true表示在事件捕获阶段调用时间处理程序;false表示在冒泡阶段调用事件处理程序.
javascript的事件流的更多相关文章
- javascript 中 事件流和事件冒泡
一.事件流 是描述页面接受事件的顺序,IE 使用的是时间冒泡流;而Netscape的事件采用的是事件捕获流.1.事件冒泡JS 和 HTML是通过事件的方式实现交互.事件冒泡 开始元素,将事件逐级传递, ...
- 【追寻javascript高手之路05】理解事件流
前言 新的一天又开始了,我们对今天对未来抱有很大期待,所以开始我们今天的学习吧,在此之前来点题外话,还是爱好问题. 周三的面试虽然失败,但是也是很有启迪的,比如之前我就从来没有想过爱好问题,我发现我的 ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- JS事件流与DOM事件处理程序
在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...
- 浅析JavaScript事件流——冒泡
一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...
- javaScript事件(一)事件流
一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
- 【原】javascript事件流
摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原 ...
随机推荐
- UNIX设备文件
UNIX和Linux中比较重要的三个设备文件是:/dev/console,/dev/tty和/dev/null. 0 /dev/console 这个设备代表的是系统控制台,错误信息和诊断信息通常会被发 ...
- MySQL主从数据一致性检验
MySQL主从数据一致性检验 检查主从数据一致性,我们使用pt-table-checksum ,pt-table-checksum是percona-tools一个工具,用来校验主从库数据是不是一致. ...
- ubuntu16安装mysql图形界面
之前在windows用sqlyog当做图形界面连接mysql,现在在ubuntu上需要连接测试环境的数据库,需要安装mysql图形界面.安装只需要条命令: sudo apt-get update su ...
- OC基础:OC 基本数据类型与对象之间的转换方法 分类: ios学习 OC 2015-06-18 20:01 11人阅读 评论(0) 收藏
1.Foundation框架中提供了很多的集合类如:NSArray,NSMutableArray,NSSet,NSMutableSet,NSDictionary,NSMutableDictionary ...
- cglib 简单 代理示例-1
引用包cglib-xxx.jar非Maven项目还需要手动引用包asm-xxx.jar业务类(不需要定义接口)cglib代理类(实现接口MethodInterceptor) 异常信息(项目只引用了cg ...
- Anaconda+Tensorflow环境安装与配置
转载请注明出处:http://www.cnblogs.com/willnote/p/6746499.html Anaconda安装 在清华大学 TUNA 镜像源选择对应的操作系统与所需的Python版 ...
- es6语法快速上手(转载)
一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...
- Laravel 5.1 中 Session 数据存储、访问、删除及一次性Session实例教程
1.Session的由来及其实现 HTTP协议是无状态的协议,同一个客户端的这次请求和上次请求是没有对应关系的.也就是说我们无法在服务器端确认两次请求是否是同一个用户所为,这为我们在一些应用场景中实现 ...
- 一张方便的graphql schema 语言手册
参考资料 https://github.com/sogko/graphql-schema-language-cheat-sheet
- 来自官方的一些dbt 最佳实践
限制对原始数据的依赖性 您的项目将取决于存储在数据库中的原始数据.我们建议制作所谓的“基本模型”,以最大限度地减少对原始数据表的依赖性.在此约定中,基本模型可以具有以下职责: 仅选择与当前分析相关的字 ...