上篇博客提到了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. Android03－Activity生命周期及启动模式

    1.返回栈概念 2.生命周期 1. onCreate() 这个方法你已经看到过很多次了,每个活动中我们都重写了这个方法,它会在活动 第一次被创建的时候调用.你应该在这个方法中完成活动的初始化操作,比如 ...

  2. windows后台服务程序编写

    Windows后台服务程序编写 1. 为什么要编写后台服务程序 工作中有一个程序需要写成后台服务的形式,摸索了一下,跟大家分享. 在windows操作系统中后台进程被称为 service. 服务是一种 ...

  3. 谈谈ILDasm的功能限制与解除

    原文:谈谈ILDasm的功能限制与解除 首先,我在此申明,此文并不是教别人突破限制,我们只是用学习的眼光看问题 大家都知道ILDasm是.NET程序的反编译工具,它是由Microsoft提供的反编译工 ...

  4. 5.4const对象

    常成员函数 一个const对象可以调用const函数,但不能调用非const成员函数.必须将关键字const放在函数参数表之后,才能说明该函数是一个const成员函数. 声明常成员函数的格式如下: 类 ...

  5. docker制作node程序镜像：

    准备: 需要5个文件 新建一个docker文件夹 1 .ignore git忽略文件用的 2 pakage.json 安装NODE程序的 也可以直接拷贝进 docker文件加 3 node环境 lin ...

  6. php获取服务器地址

    if ( isset( $_SERVER['HTTP_X_FORWARDED_HOST'] ) ) { // Support ProxyPass        $t_hosts = explode( ...

  7. MAX Average Problem（斜率优化dp）

    MAX Average Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. 学习Java这几个快捷键你得知道（不断更新中）

    java中的System.out.println();的快捷键    --------先输入sysout  在按 alt + /

  9. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  10. Window Server 2012无线网卡和声卡驱动解决方法

    刚开始安装server2012时,驱动一直装不上以为是驱动的问题,后来在网上找了一下才明白是为啥,由于服务器默认不会开启无线LAN功能.和声卡服务,下面简单的方式给大家介绍一下解决方法: 无线网卡解决 ...