zoukankan      html  css  js  c++  java
  • 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使用量还非常大的国家,哎,仅仅能慢慢承受折磨了。

  • 相关阅读:
    8月工作杂记
    好用的MarkDown编辑器
    Windows下遍历某目录下的文件
    Visual Assist 试用期过期怎么办?
    网易有道面试
    Windows操作系统C盘占用空间过多
    如果有一天我当了面试官
    matlab进行三维重建
    HBase , Doris
    《Java程序设计》第6周学习总结
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5203988.html
Copyright © 2011-2022 走看看