2014年辛星解读Javascript之DOM之冒泡和捕获
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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之冒泡和捕获的主要内容，如果未能解决你的问题，请参考以下文章