上篇博客提到了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. C++临时对象销毁时间

    下面这段代码会输出什么? const char* p = string("hello temprary string").c_str(); cout << p; 下面这 ...

  2. poj1504--求两个数的反转数的和的反转数

    题意:给定4321 5678,结果再反转(1234+8756) 一开始以为是poj1503一样,就稀里糊涂的敲代码,实际上有不同 如题:先求1234 + 8765 ------------------ ...

  3. MFC_Office

    添加新项目,MFC应用程序 多个顶级文档,项目类型:Office,其他默认,点击下一步 复合文档支持:容器,右边都勾选,点击下一步 文件拓展名:c,全选,其他默认,点击下一步 数据库支持:无,其他默认 ...

  4. HTTP的头部

    if($this->GetHead("http-edition")=="HTTP/1.1") $httpv = "HTTP/1.1"; ...

  5. collectionView关于点击事件

    -(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)i ...

  6. java 解析json的问题

    本文转载自http://chriszz.sinaapp.com/?p=392 Json就是Javascript notation,可以替代XML,用做数据交互. Json的两种基本表示形式,可以用自动 ...

  7. localhost和127.0.0.1区别

    详情见: http://blog.csdn.net/xifeijian/article/details/12879395

  8. C++中引用用于结构

    正确 void change(test &target) { target.name = "aaa"; } 错误 void change(const test &t ...

  9. 一个小型的DBHelper的诞生(1)

    一直想做一个自己的简单的 DBHelper .没有其他原因,只是其他的轮子用起来感觉太重了. 设计的大体思路如下: 大体方向: 生成一个简单版本的DB层,需要支持数据库 MySql,Oracle,Sq ...

  10. Eclipse开发工具学习之道：用Eclipse生成jar文件

    很多人都不知道怎么在Eclipse下生成jar文件,或者生成了jar文件后又老是用不了,总是会收到 Exception in thread "main" java.lang.NoC ...