上篇博客提到了Javascript事件绑定函数的三个參数。第一个是一个event。第二个是一个function。第三个是一个布尔变量。它用于指定事件传递的顺序，分为冒泡和捕获两种方式，接下来我们将揭开它的神奇面纱，彻底的解读它。

首先看例如以下代码：

<html>

<body>

	<div id = "demo"><p id = "tag">辛星</p></demo>

	<script type="text/javascript">

		document.getElementById("demo").addEventListener("click",mydemo);

		document.getElementById("tag").addEventListener("click",myshow);

		function myshow(){ alert("标签p被触发");}

		function mydemo(){ alert("标签div被触发");}

	</script>

</body>

</html>

那么对于上述HTML文件，假设我们点击了“辛星”这个字样，那么先出现哪个弹窗呢？假设读者把上述代码拷贝下来，后缀命名为一个HTML文件，那么会发现它先弹窗“标签p被触发”。等我们对它点了确定之后，才是“标签div被触发”，那么，这是什么机制呢？

这就是由于第三个參数在起作用，第三个參数默认是false，即採用冒泡的方式，什么是冒泡呢？假设大家学习过算法。会发现有个冒泡排序，非常easy，就是气泡会从下向上浮动。这样的方式表示我们先响应小的标签。再响应大的标签，比方这里p标签就是div标签的子元素，因此。这里先响应p标签绑定的事件。然后再响应div标签绑定的点击事件。

假设把第三个參数改成true。则效果正好相反，先响应父标签的事件。再响应子标签的事件。假设就讲这些东西，显得这篇博文是凑数的，那么我们就再介绍一些东西。这里说一下removeEventListener这个函数。它用于解除绑定，即把我们的事件和事件的回调函数解除绑定。

只是这个addEventListener和removeEventListener对于浏览器的兼容性上并非那么好，还是IE系列在作怪，IE8之下的版本号不支持，可是IE8支持使用element.attachEvent（event。function)来绑定，用element.detachEvent(event,function)来解除绑定。

对于浏览器的兼容性。确实一个比較让人头疼的问题。特别是在中国这样的IE使用量还非常大的国家，哎，仅仅能慢慢承受折磨了。

2014年辛星解读Javascript之DOM之冒泡和捕获的更多相关文章

  1. 2014年辛星解读Javascript之DOM之事件及其绑定

    我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...

  2. 2014年辛星解读Javascript之DOM高速入门

    在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...

  3. 2014年辛星解读Javascript之用DOM动态操纵HTML元�

    关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...

  4. 2014年度辛星解读css第四节

    接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...

  5. 2014年辛星解读css第一节

    CSS是Cascading Style Sheets的缩写.即层叠样式表,它用于表现HTML的样式,即HTML仅仅是去写该网页有哪些内容,至于怎样去表现它们,由CSS去定制. ************ ...

  6. 2014年辛星解读css第五节

    本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型&q ...

  7. 2014年辛星解读css第二节

    第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...

  8. 2014年辛星解读css第六节

    这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...

  9. 2014年辛星解读css第三节

    第二节我们讲述的差点儿全是CSS的选择器,那么以下这一节我们来讲一下CSS的颜色和文本的一些东西,尽管我对调色不大敏感.可是对于颜色还是比較感兴趣的. *********CSS中的颜色******** ...

随机推荐

  1. 提高mindmanager 8的启动速度

    提高mindmanager 8的启动速度一连串 发布于:2010-01-13 18:12不少人抱怨mindmanager 8的启动速度较慢,用以下办法配置一下就能解决:1.进入mindmanager ...

  2. delphi 发送Windwos消息控制按钮（控制计算器里的某一个按钮）

    procedure TfrmMain.btnSendClick(Sender: TObject); var hCalc, h1: Cardinal; begin WinExec('calc', SW_ ...

  3. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...

  4. C语言入门（19）——C语言的编码风格

    代码风格好不好就像字写得好不好看一样,如果一个公司招聘秘书,肯定不要字写得难看的,同理,代码风格糟糕的程序员肯定也是不称职的.虽然编译器不会挑剔难看的代码,照样能编译通过,但是和你一个团队进行协作的其 ...

  5. Guava缓存器源码分析——缓存统计器

    Guava缓存器统计器实现: 全局统计器——         1.CacheBuilder的静态成员变量Supplier<StatsCounter> CACHE_STATS_COUNTER ...

  6. poj 2728 Desert King（最优比例生成树）

    #include <iostream> #include <cstdio> #include <cmath> #include <cstdlib> #i ...

  7. 黑马程序员_高新技术之javaBean，注解，类加载器

    ----------- android培训.java培训.java学习型技术博客.期待与您交流! ---------- 第一部分 javaBean 一,由内省引出javaBean 1,内省: 内省对应 ...

  8. 无线网破解软件|一键式破解无线网|BT17软件包下载[笔记本+软件就行]

    从新版BT17发布到现在已经有一段时间,谢谢大家的一直来的关注.现在给大家讲解一下无线网破解问题,告诉 大家如何一键式破解WPA,WPA2,AES.Tkip等加密方式以及新版BT17软件包的下载地址. ...

  9. [置顶] java 通过classloader加载类再通过classforname实例化

    自己写一个web服务器,发现class.forName用不了,找不到类,原因是找不到类路径, 可以过加载需要的类的文件路径,然后再通过ClassLoader来加载所需要的类.其中的原 理就不多说了,下 ...

  10. sqlserver数据库 提纲

    sqlserver数据库一.体系结构文件--服务--界面 文件---.maf .ldf .ndf服务--MSSqlserver,别名(实例名)界面--宋庆龄serve如何windouws身份验证,如何 ...