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

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. C# 自动Ping服务

    using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; u ...

  2. linux定时任务的设置

    1.  键入 crontab  -e 编辑crontab服务文件 例如 文件内容如下: */2 * * * * /bin/sh /home/admin/jiaoben/buy/deleteFile.s ...

  3. GirdView 追忆学生时代的百思不得解

    临近年关,越多越多的园友开始了对工作.生活的总结,以及对来年目标的确立.这很励志,人是一根能思想的苇草,想来想去,我实在没什么惊天地.泣鬼神的英勇事迹,16年毕业季,按部就班的在时间的马车上颠簸,阅读 ...

  4. su- 与su的区别

    su命令和su -命令最大的本质区别就是:前者只是切换了root身份,但Shell环境仍然是普通用户的Shell:而后者连用户和Shell环境一起切换成root身份了.只有切换了Shell环境才不会出 ...

  5. 学习C语言感悟

     还记得刚上第一节C语言课的时候,基本上一节课只有最后10分钟的内容听懂了.在此之前从没接触过C语言,想说看看书预习一下吧,可是完全找不到条理,发现老师也不是按书上的顺序讲的.当时就特别着急,想说难道 ...

  6. wsdl学习

    本文来自 :迹忆 原文地址:http://www.onmpw.com/tm/xwzj/network_47.html 在刚开始学习Webservice的时候,发现里面涉及到的知识点还真不少,每一点单拿 ...

  7. 2016ACM/ICPC亚洲区沈阳站-重现赛

    C.Recursive sequence 求ans(x),ans(1)=a,ans(2)=b,ans(n)=ans(n-2)*2+ans(n-1)+n^4 如果直接就去解...很难,毕竟不是那种可以直 ...

  8. static变量引起的问题，List数据覆盖

    出现的问题:Listt加载数据时,后面加载的数据会覆盖前面的数据,把后面的数据变得和前面一样 原因:因为刚开始把添加的数据写成了静态变量,所以一个改了以后所有都改了 解决方法:把数据设成普通属性,非静 ...

  9. ACM 杭电HDU 2084 数塔 [解题报告]

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  10. UVA 10795 新汉诺塔问题

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...