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高级程序设计第三版> 先来一段书里的原 ...
随机推荐
- IOS延时加载网络图片
重网上下载图片是很慢的,为了不影响体验,选择延时加载图片是很好的办法. 一个tableView 列表,左边暂时没有图 - (UITableViewCell *)tableView:(UITab ...
- java并发编程之三--CyclicBarrier的使用
CyclicBarrier 允许一组线程全部等待彼此达到共同屏障点的同步辅助. 循环阻塞在涉及固定大小的线程方的程序中很有用,这些线程必须偶尔等待彼此. 屏障被称为循环 ,因为它可以在等待的线程被释放 ...
- 高强度减脂Tabata练习
每个动作20秒 动作间休息10秒 8个动作为一组 每次做四组 让你大汗淋漓全身酸爽 波比跳 ▼ 跳起箭步蹲 ▼ 登山者 ▼ 俯卧撑 ▼ 卷腹 ▼ 开合跳 ▼ 高抬腿 ▼ 俄罗斯转体 ▼ Bingo ▼ ...
- IntelliJ IDEA 2017.01配置jdk和tomcat
之前开发Web项目都是用myeclipse或者eclipse,最近想用IDEA这个编辑器去配置一个Web项目,因为是新手,加上对界面的操作不熟练,所以在配置的过程中遇到了一些难题.最后配置成功,并且可 ...
- Linux文件IO与通用块层的请求合并
本文参考https://mp.weixin.qq.com/s/Imt4BW-zoHPpcOpcKZs_AQ, 公众号“Linux阅码场” 请求合并就是将进程内或者进程间产生的在物理地址上连续的多个IO ...
- 使用自己的域名解析cnblogs博客(CSDN也可以)
本文主要介绍怎样使用自己购买的域名指向cnblogs博客 通常来说技术人员都会创建个自己的技术博客,总结下工作中的问题,经验等等,不过某些博客的访问链接的确是不太容易记忆或者输入,对我们分享造成一定的 ...
- [LeetCode&Python] Problem 883. Projection Area of 3D Shapes
On a N * N grid, we place some 1 * 1 * 1 cubes that are axis-aligned with the x, y, and z axes. Each ...
- Mysql隔离级别 sql示例理解
前言 事务要解决的是多线程并发修改数据库的问题.Mysql innodb 引擎支持事务.类似 Java 中的各种锁,例如乐观锁(CAS),读写锁,悲观锁.事务也有很多级别. 每个隔离级别要解决的问题都 ...
- webstorm快捷键汇总
查找替换 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件(必记) ctrl+shift+alt+N ctrl+s ...
- systemd开机启动
SUMMARY = "rvc_os temporary version" HOMEPAGE = "http://www.desay-svautomotive.com&qu ...