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

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. rdesktop共享剪贴板的问题

    使用-r clipboard:PRIMARYCLIPBOARD参数来共享剪贴板,连接到window7 但有时就不好用了,剪贴板没有同步 找到一些相关的资料 https://bugs.launchpad ...

  2. 二十六、Java--------反射

    反射 正常情况下,我们必须知道一个类的完整路径后才可以实例化对象,但是在Java也可以通过一个对象来找到其所在类的信息,这其实就是Class的功能. 可以看到此时的所有操作都是反着来,这就是反射. p ...

  3. 在ABP模板工程中使用MySql

    1 下载一个新的ABP模板项目 http://www.aspnetboilerplate.com/ 2 在Windows上安装MySql, 创建一个新的数据库 sampledb https://dev ...

  4. 鸟哥的linux私房菜学习记录之软件安装原始码与Tarball

  5. c# winform DirectX播放器 可以任意设置宽高比 屏幕拉伸

    第一步:dll引用 Microsoft.DirectX.dll Microsoft.DirectX.AudioVideoPlayback.dll 如果没有的话,可能需要安装微软的DRECTX JDK ...

  6. Dynamics AX 2012 在BI分析中建立数据仓库的必要性

    AX系统已有的BI分析架构 对于AX 的BI分析架构,相信大家都了解,可以看Reinhard之前的译文[译]Dynamics AX 2012 R2 BI系列-分析的架构 . AX 的BI分析架构的优势 ...

  7. 可用的rtmp互联网地址

    rtmp://live.hkstv.hk.lxdns.com/live/hks 测试可用. vlc使用ffmpeg取rtmp网络流. 代码文件路径: vlc-2.2.1\modules\access\ ...

  8. RecyclerView的坑

    LinearLayoutManager layoutManager = new LinearLayoutManager(this);recycleView.setLayoutManager(layou ...

  9. DP专题训练之HDU 1864 最大报销额

    做DP一定要注意数组的大小,嗯,就是这样~ Description 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过10 ...

  10. MySQL存储过程中实现回滚

    用存储过程处理复杂的业务时,可能涉及到对多张表格的操作,在任一个步骤出了问题,就需要对前面的操作回滚.举例实现: DROP PROCEDURE IF EXISTS pro_test; CREATE P ...