2014年辛星解读Javascript之DOM之冒泡和捕获

时间:2022-10-25 19:30:10

     上篇博客提到了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,即采用冒泡的方式,什么是冒泡呢?如果大家学习过算法,会发现有个冒泡排序,很简单,就是气泡会从下向上浮动,这种方式表示我们先响应小的标签,再响应大的标签,比如这里p标签就是div标签的子元素,因此,这里先响应p标签绑定的事件,然后再响应div标签绑定的点击事件。

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

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

     对于浏览器的兼容性,确实一个比较让人头疼的问题,特别是在中国这种IE使用量还很大的国家,哎,只能慢慢承受折磨了。