JS学习之事件流
本文是原创文章，如需转载，请注明文章出处
JS和AS师出同源，所以事件流的3个阶段也跟AS一样，分别是捕获阶段，目标阶段，冒泡阶段。
下面写了个例子可以清晰的看出事件流的顺序：
eventTest.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="eventTest.js"></script>
</head>
<body>
<div id="div" style="position:relative;width:100%;height:200px;background: #00ff00">
<button id="btn" style="position:absolute;display:block;left:50%;top:50%;margin-left:-26px;margin-top:-10px">button</button>
</div>
</body>
</html>
eventTest.js
window.onload = function()
{
init();
} function init(){
var div = document.getElementById("div");
div.addEventListener("click", onDivCaptureHandler, true);
div.addEventListener("click", onDivBubbleHandler, false); var com = document.getElementById("btn");
com.addEventListener("click", onBtnCaptureHandler, true);
com.addEventListener("click", onBtnBubbleHandler, false);
} function onDivCaptureHandler(event){
console.log("div capture----eventPhase:" + event.eventPhase);
} function onDivBubbleHandler(event){
console.log("div Bubble-----eventPhase:" + event.eventPhase);
} function onBtnCaptureHandler(event){
console.log("btn capture-----eventPhase:" + event.eventPhase);
} function onBtnBubbleHandler(event){
console.log("btn bubble-----eventPhase:" + event.eventPhase);
}
这个例子很简单，先添加一个绿色的div，其中有个居中的按钮，JS代码中分别给div和按钮添加点击事件的监听器，需要注意的是，addEventListener的第三个参数，为true时这个事件只在捕获阶段触发。
以下是结果：
点击按钮之后，控制台输出：
div capture----eventPhase:1
btn capture-----eventPhase:2
btn bubble-----eventPhase:2
div Bubble-----eventPhase:3
由此可以清晰的看出，捕获阶段是从最上层的元素逐层向下直到最具体的点击对象，而冒泡阶段是从最具体的点击对象逐层向上直到最上层。
另外，需要注意的是，addEventListener的第三个参数无论是true还是false，当具体对象的监听器触发时，事件阶段都是2，也就是目标阶段。
JS学习之事件流的更多相关文章
- js学习笔记---事件代理
事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...
- js学习笔记-事件委托
通过事件委托,你可以把事件处理器绑定到父元素上,避免了把事件处理器添加到多个子级元素上.从而优化性能. 事件代理用到了事件冒泡和目标元素.而任何一个元素的目标元素都是一开始的那个元素. 这里首先要注意 ...
- JS学习笔记-事件绑定
一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写.这样的方式无疑造成了改动以及扩展的问题,已经非常少使用了. 脚本模型是将事件处理函数写到js文件里, ...
- JS学习之事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
- node.js学习(4)事件
1 导入事件库
- JS学习五(js中的事件)
[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...
- JS的事件绑定、事件流模型
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...
- JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理
1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...
- 深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
随机推荐
- Android动画之淡入淡出
为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...
- 【转载】调试利器 autoexp.dat
转载:http://www.cppblog.com/flyinghare/archive/2010/09/27/127836.html autoexp.dat入门(调试时自定义变量显示) VC在调试状 ...
- cocopods 安装与使用
iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...
- Hiho coder 1236 2015 北京网络赛 Score
五维偏序..一开始被吓到了,后来知道了一种BITSET分块的方法,感觉非常不错. 呆马: #include <iostream> #include <cstdio> #incl ...
- asp.net 事件加载顺序
下面是母版页与内容页合并后事件的发生顺序: 母版页控件 Init 事件. 内容控件 Init 事件. 母版页 Init 事件. 内容页 Init 事件. 内容页 Load 事件. 母版页 Load 事 ...
- 浅谈Scrapy爬虫（一）
以下谈论的 scrapy 基于 0.20.2 版本(当前最新版本是 0.22.0 ),python 2.7.6. 开发环境是windows 7 sp1. 互联网上比较有价值的参考资料 1. Scr ...
- WAV文件头相关资料
http://stackoverflow.com/questions/6284651/avaudiorecorder-doesnt-write-out-proper-wav-file-header h ...
- JAVA NIO——Buffer和FileChannel
Java NIO和IO的主要区别 IO NIO 面向流 面向缓冲 阻塞IO 非阻塞IO 无 选择器 示例: import java.io.FileInputStream; import java.io ...
- struts.xml配置详解 内部资料 请勿转载 谢谢合作
1.<include> 利用include标签,可以将一个struts.xml配置文件分割成多个配置文件,然后在struts.xml中使用<include>标签引入其他配置文件 ...
- javascript高级程序设计---第二、三章
在HTML中引用javaScript javascript的几个属性 type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...