本文是原创文章，如需转载，请注明文章出处

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学习之事件流的更多相关文章

  1. js学习笔记---事件代理

    事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...

  2. js学习笔记-事件委托

    通过事件委托,你可以把事件处理器绑定到父元素上,避免了把事件处理器添加到多个子级元素上.从而优化性能. 事件代理用到了事件冒泡和目标元素.而任何一个元素的目标元素都是一开始的那个元素. 这里首先要注意 ...

  3. JS学习笔记-事件绑定

    一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写.这样的方式无疑造成了改动以及扩展的问题,已经非常少使用了. 脚本模型是将事件处理函数写到js文件里, ...

  4. JS学习之事件冒泡

    (1)什么是事件起泡      首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...

  5. node.js学习(4)事件

    1 导入事件库

  6. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

  7. JS的事件绑定、事件流模型

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...

  8. JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

  9. 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...

随机推荐

  1. 国内外从事CV相关的企业

    提示:本文为笔者原创,转载请注明出处:blog.csdn.net/carson2005 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问题,这里,我给出自己收集 ...

  2. 使用django rest framework

    django 刚接触,想做一些restful api , google了一下,发现有现成的框架.Django REST framework. 对使用做下记录: 安装 从http://django-re ...

  3. zabbix_sender自定义监控

    这里推荐这个博客 http://www.ttlsa.com/monitor/zabbix/ 在这里学一遍都不用买书,直接就能玩转zabbix了 回归正题 zabbix相关包下载地址:http://ww ...

  4. mha配置参数详解

    mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...

  5. GreenDao介绍

    GreenDao介绍 greenDAO 是一个将对象映射到 SQLite 数据库中的轻量且快速的 ORM 解决方案 何为ORM? ORM(Object/Relation Mapping): 对象/关系 ...

  6. web项目开发规范整理总结

    一.类.函数.变量名命名: 1.定义类时,全部拼音的首字母必须大写:如Person,ClassDemo:(帕斯卡命名法):也可以用带下斜杆的匈牙利命名法进行命名,如    head_navigatio ...

  7. Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  8. 按年、季度、月分组&&计算日期和时间的函数

    Mysql 按年.季度.月分组 按月度分组: select DATE_FORMAT(i.created_at, '%Y-%m月')...................GROUP BY DATE_FO ...

  9. CSS样式表（三）

    前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...

  10. 扩展卡尔曼滤波（MRPT）

    EKF relies on a linearisation of the evolution and observation functions which are good approximatio ...