MicroSoft的设计是当事件在元素上触发时，该事件将接着在该节点的父节点触发，以此类推，事件一直沿着DOM树向上传播，直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”。

　　在基于W3C标准的浏览器中，事件传播首先是从最外层的元素传播到最内层的目标元素（这称为事件的“捕获”阶段），然后事件的传播讲反转方向，从最内层的元素在冒泡到最外层的元素。

回顾addEventListener()方法和removeEventListener()方法，

targetElemen.addEventListener(type,listener,useCapture);

targetElemen.removeEventListener(type,listener,useCapture);

参数useCapture=false，则将事件传播的冒泡阶段绑定事件，否则use=true，则将事件传播的捕获阶段绑定事件。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>BodyTest</title>

</head>

<body>

    <div id ="div1">

        <div id="div2">

            I am inside a div.

        </div>

    </div>

    <script type="text/javascript">

        var div1 = document.getElementById("div1");

        var div2 = document.getElementById("div2");

        div1.addEventListener("click",eventHandle1,true);

        div1.addEventListener("click",eventHandle3,false);

        div2.addEventListener("click",eventHandle4,true);

        div2.addEventListener("click",eventHandle2,false);

        function eventHandle1(){alert("1");}

        function eventHandle2(){alert("2");}

        function eventHandle3(){alert("3");}

        function eventHandle4(){alert("4");}

    </script>

</body>

</html>

输出顺序：1423

Javascript事件传播的更多相关文章

  1. javascript 事件传播与事件冒泡，W3C事件模型

    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...

  2. JavaScript中的事件冒泡？事件传播的解释

    注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...

  3. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  4. JS 传播事件、取消事件默认行为、阻止事件传播

    1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...

  5. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  6. javaScript事件（一）事件流

    一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...

  7. [解惑]JavaScript事件机制

    群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...

  8. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  9. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

随机推荐

  1. PHP 点滴疑惑

    在数据库中,字段为NULL,可以使用empty()进行判断 <?php $CONFIG['hostname'] = 'localhost'; $CONFIG['username'] = 'roo ...

  2. dirname(__FILE__) 的使用总结

    dirname(__FILE__) php中定义了一个很有用的常数,即 __file__ 这个内定常数是当前php程序的就是完整路径(路径+文件名). 即使这个文件被其他文件引用(include或re ...

  3. 20160502-struts2入门--ognl表达式

    一.OGNL表达式语言 OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目. Struts 2框架使用OGNL作为默认的表达式语言 ...

  4. ACM——数的计算

    数的计算——(递归(超时)和非递归) 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte总提交:1050            测试通过:31 ...

  5. Ajax的Get和Post的区别

    Ajax的Get和Post的区别Get方式:用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照U ...

  6. SQLSERVER连接池内部机制

    前言介绍: 当应用程序运行的时候,会有一个连接池的管理控件运行在应用程序的进程里,统一管理应用程序和SQLSERVER建立的所有连接, 并且维护这些连接一直处于活动状态.当有用户发出一个connect ...

  7. 读取tomcat下的文件夹路径

    背景:测试的为了每次部署时清缓存,将temp文件夹也删了,导致系统中有些excel导出功能用不了. 解决:新建一个监听文件,在系统启动时,判断temp文件夹是否存在,不存在就新建. temp文件夹的作 ...

  8. percent-encode 百分号编码

    原文地址:http://www.imkevinyang.com/2009/08/详解javascript中的url编解码.html 摘要 URI(统一资源标识)编解码 为什么需要编码 哪些需要编码 如 ...

  9. HDU 4768 Flyer（二分法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4768 题目大意:每组数据有n行输入,每行有三个数A.B.C,A<=B且小于2^32,从A到B每隔 ...

  10. OpenJudge/Poj 1915 Knight Moves

    1.链接地址: http://bailian.openjudge.cn/practice/1915 http://poj.org/problem?id=1915 2.题目: 总Time Limit: ...