2014年辛星解读Javascript之DOM之冒泡和捕获
上篇博客提到了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之冒泡和捕获的更多相关文章
- 2014年辛星解读Javascript之DOM之事件及其绑定
我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...
- 2014年辛星解读Javascript之DOM高速入门
在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...
- 2014年辛星解读Javascript之用DOM动态操纵HTML元�
关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...
- 2014年度辛星解读css第四节
接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...
- 2014年辛星解读css第一节
CSS是Cascading Style Sheets的缩写.即层叠样式表,它用于表现HTML的样式,即HTML仅仅是去写该网页有哪些内容,至于怎样去表现它们,由CSS去定制. ************ ...
- 2014年辛星解读css第五节
本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型&q ...
- 2014年辛星解读css第二节
第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
- 2014年辛星解读css第六节
这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...
- 2014年辛星解读css第三节
第二节我们讲述的差点儿全是CSS的选择器,那么以下这一节我们来讲一下CSS的颜色和文本的一些东西,尽管我对调色不大敏感.可是对于颜色还是比較感兴趣的. *********CSS中的颜色******** ...
随机推荐
- delphi 对TThread扩充TSimpleThread
对线程的使用,是每个开发者都应该熟练掌握的,也是进阶的重要一环. 可以这样说,没有线程,连界面假死的问题都解决不了,就更别谈并行处理来提高效率了. 本例对线程进行改进,打造一个基础的线程,以后线程应用 ...
- GIS 地图中术语解释
分辨率和像素的关系 像素是指照片的点数(表示照片是由多少点构成的),分辨率是指照片像素点的密度(是用单位尺寸内的像素点,一般用每英寸多少点表示--dpi).照片实际大小是像素决定的.一个像素很大的照片 ...
- Python学习笔记3-文件的简单操作
Python中的文件操作 Python中文件打操作离不开两个模块 os 和 shutil os:操作文件.目录: Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话, ...
- Linux学习之十一、环境变量的功能
环境变量的功能 可以利用两个命令来查阅,分别是 env 与 export 呢! 范例一:列出目前的 shell 环境下的所有环境变量与其内容. [root@www ~]# env SHELL 告知我们 ...
- istream类的公有成员函数
1 eatwhite 2 get 3 getline 4 gcount 5 ignore 6 operator>> 7 peek 8 read 9 seekg 10 tellg 1 eat ...
- html系列教程--center dl dt dd div
<center> 标签:对其所包括的文本进行水平居中. <datalist> 标签:定义列表,与 input 元素配合使用该元素,来定义 input 可能的值 demo: &l ...
- EF实体框架-从数据库更新模型 一部分表的外键（导航属性）无法显示
从数据库更新模型 要想让数据库表之间的外键关系 显示到实体模型的导航属性中去. 表的外键 对应另一张表的字段要是主键,唯一键显示不出来
- C#获得命令提示符输出
原文:http://blog.csdn.net/abrahu/article/details/6611504 C#获得命令提示符输出 分类: c#应用程序2011-07-16 23:34 600人阅读 ...
- javascript限制input只允许输入数字
在做数据提交的表单时,经常要对input输入内容的类型进行限制,譬如javascript限制input只允许输入数字,最好的方法当然是使用javascript,因为它不用与服务器交互,大大减轻了服务器 ...
- leetcode LRU Cache python
class Node(object): def __init__(self,k,x): self.key=k self.val=x self.prev=None self.next=None clas ...