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高级程序设计第三版> 先来一段书里的原 ...
随机推荐
- anu - react
import { options } from "./util"; import { Children } from "./Children"; import ...
- ASIHTTPRequest类库简介和使用说明(转)
ASIHTTPRequest类库简介和使用说明 官方网站: http://allseeing-i.com/ASIHTTPRequest/ .可以从上面下载到最新源码,以及获取到相关的资料. 使用iOS ...
- jsp参考手册
DHTML手册javascript programmer's reference
- 高效开发iOS -- 那些不为人知的KVC[转载]
valueForKeyPath 本篇来讲解一下那些不为人知,也经常被忽略掉,并且很实用的KVC干货小技巧 获取数组里的,最大.最小.平均.求和 NSArray *array = @[@"1& ...
- Android Studio - 安卓开发工具 打开后报错集合、修复指南
安卓开发工具错误修复 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创新 ...
- Ubuntu 18.10连接Windows 桌面
========================= 适用于Linux连接Windows远程桌面 Linux版本:CentOS.Ubuntu等 1.终端命令安装远程桌面客户端工具,具体命令如下: sud ...
- cglib 多重 代理示例-2
from: http://thinkinjava.cn/2018/10/%E4%BD%BF%E7%94%A8-Cglib-%E5%AE%9E%E7%8E%B0%E5%A4%9A%E9%87%8D%E ...
- Python编码——常见的编码设置
1.查看自己电脑的python的编码设置 # -*- coding: utf8 -*- import sys, locale """ locale.getpreferre ...
- 【spring源码分析】面向切面编程架构设计
2 注解说明 2.1 @Aspect 作用是把当前类标识为一个切面供容器读取 2.2 @Before标识一个前置增强方法,相当于BeforeAdvice的功能,相似功能的还有 2.3 @AfterRe ...
- M端计算rem方法
(function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460 ...