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 ...
随机推荐
- Problems with MMM for mysql(译文)
Problems with mmm for mysql posted in MySQL by shlomi 原文:http://code.openark.org/blog/mysql/problems ...
- php 中文繁简体转换
<?php $testC = new TestC (); $testC->index (); class TestC { private $utf8_gb2312; private $ut ...
- jquey知识点整理
jquery选择器 1.元素选择器: $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro&q ...
- php大小写转换
1.将字符串转换成小写 strtolower();: 该函数将传入的字符串参数所有的字符都转换成小写,并以小定形式放回这个字符串.例: <?php $str = "I want T ...
- Network Wars-ZOJ2676最小割+01规划
Time Limit: 5 Seconds Memory Limit: 32768 KB Special Judge Network of Byteland consists of n servers ...
- [JAVA] java class 基本定义 Note
java class 基本定义 Note 1 package abeen.note; 2 import java.util.*; 3 4 5 /* 6 java calss 基本 7 */ 8 pub ...
- js遍历table中的每一个元素
function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...
- 求System.arraycopy的用法
public class Shuzufuzhi { public static void main(String args[]) { int myArray[]={1,2,3,4,5,6}; in ...
- AS 重装系统之后配置
重新安装了win7 系统,一起的AS 放在其他盘里 1.重新安装java sdk 配置java 环境. 2,从新配置AS 工作界面及各种配置 3,重新安装genymotion 并在as 中配置 出现 ...
- JAVA微信支付多次回调方法解决方案
@WebServlet("/ActionServlet")public class PayWxOrderingReqCBS extends HttpServlet { public ...