2014年辛星解读Javascript之DOM之冒泡和捕获[通俗易懂]

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使用量还非常大的国家,哎,仅仅能慢慢承受折磨了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115965.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • HDU 2160 母猪的故事

    HDU 2160 母猪的故事

  • 怎么解决生理需求啊_activate pycharm什么意思

    怎么解决生理需求啊_activate pycharm什么意思最近在一直学习pythonDjangoweb开发,安装了好久的pycharm打不开了,显示如下:

  • 所有方向你要的资料干货这都有,从入门到实战!【CSDN宝藏资料图鉴第一期】「建议收藏」

    前言CSDN是全球知名的开发者社区,创建于1999年,经过20来年的知识文档积累已然成为中文开发者的知识宝库;从基础的法入门到蜕变实战案例、从神秘前沿技术到清晰的实践步骤,可以说CSDN是你找寻资料的最佳宝库,只要你想得到,在这里就可以找得到!今天我们就来深拔一期有质量的专栏和资源,这些专栏作者可能有些是在校大学生、有些是某领域内的行内大牛,但并不影响他们的文章通俗易懂并且富有深度。从在校大学生我们看到了新一代的奋进,从领域大牛身上我们也看到了无私的技术分享,希望有质量的文章越来越多,共同为行业的进步

  • RTP协议简介

    RTP协议简介以下转自:nkmnkm的专栏http://blog.csdn.net/niu_gao/article/details/69467812017/07/21RTP协议分析(转自:http://blog.csdn.net/bripengandre/article/details/2238818)分类: NetworkSecurity2008-04-0116

  • Linux上安装Mysql

    Linux上安装MysqlLinux上安装MysqlLinux上安装MysqlLinux上安装软件常见的几种方式:使用yum进行安装修改密码及登录设置编码设置开机启动Linux上安装MysqlLinux上安装软件常见的几种方式:源码编译压缩包解压(一般为tar.gz)编译好的安装包(RPM、DPKG等)在线安装(YUM、APT等)以上几种方式便捷性依次增加,但通用性依次下降,比如直接下载压缩包进行解压,这种方式一般需要自己做一些额外的配置工作,但只要掌握了方法,各个平台基本都适用,YUM虽然简单,但是平台受限,网络

  • 花椒面_百度百科_花椒面和麻椒面一样吗

    花椒面_百度百科_花椒面和麻椒面一样吗花椒面_百度百科

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号