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

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. String.Join的巧用

    String.Join大大的方便了我们拼接字符串的处理. 1.普通用法:指定元素间的拼接符号 var ids = new List<int>(); for (int i = 0; i &l ...

  2. android 官方文档 JNI TIPS

    文章地址  http://developer.android.com/training/articles/perf-jni.html JNI Tips JNI is the Java Native I ...

  3. Configure Visual Studio 2013 for debugging .NET framework

    https://referencesource.microsoft.com/ In order to configure Visual Studio 2013 do the following in ...

  4. 字符串操作 replace

    "hello".charAt(0); // "h" "hello, world".replace("hello", &q ...

  5. Custom work flow

    http://runjs.cn/detail/99epj1t2 http://www.cqroad.cn/ https://jsplumbtoolkit.com/demo/flowchart/dom. ...

  6. 30分钟学会反向Ajax

    场景1:当有新邮件的时候,网页自动弹出提示信息而无需用户手动的刷新收件箱. 场景2:当用户的手机扫描完成页面中的二维码以后,页面会自动跳转. 场景3:在类似聊天室的环境中有任何人发言,所有登录用户都可 ...

  7. 将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑

    将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑 /** * 根据传入字符串 * * @param str 传入的日期字符串 形如:Oct 8, 2016 5:29 ...

  8. JAVA实现国际化

    1 Java国际化的思路 Java程序的国际化的思路是将程序中的标签.提示等信息放在资源文件中,程序需要支持哪些国家.语言环境,就对应提供相应的资源文件.资源文件是key-value对,每个资源文件中 ...

  9. Masonry的使用

     1.//添加了这个宏,就不用带mas_前缀了 #define MAS_SHORTHAND //添加了这个宏,equalTo就等于mas_equalTo #define MAS_SHORYHAND_G ...

  10. Cocosd-x的坐标系

    OpenGL 坐标系 :   原点在屏幕左下角,x 轴向右,y 轴向上. UI坐标体系       :   原点在屏幕左上角,x 轴向右,y 轴向下. 屏幕坐标系:    UI 世界坐标系:  也叫绝 ...