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)


相关推荐

  • NLP-结巴分词

    NLP-结巴分词结巴分词结巴分词是有国内程序员(https://github.com/fxsjy/jieba)做的一个分词工具,刚开始是Python版本的,后来由anderscui(https://github.com/anderscui/jieba.NET)移植到.Net上面。结巴分词的分词过程大致为:·前缀词典(Trie):用于存储主词典,也可以动态增删词条,这个词典可以理解为jieba所“知道”的词,或者说已登录词;·有向无环图(DAG):通过前缀词典,可以找出句子所有可能的成词结果;·最大概率

  • CentOS安装MySQL8.0「建议收藏」

    CentOS安装MySQL8.0「建议收藏」目录配置yum源wget下载源安装包安装源安装MySQL启动相关启动服务查看启动状态设置开机自启重启服务配置修改密码卸载卸载MySQL删除文件配置yum源wget下载源安装包如果没有安装wget,先安装yum-yinstallwget进入mysql官网下载:https://dev.mysql.com/downloads/repo/yum/复制下载链接:https://dev.mysql.com/get/mysql80-community-release-el7-4.noarch.rp

  • 怎么将excel表导入mysql_怎么把一个数据库导入另一个数据库

    怎么将excel表导入mysql_怎么把一个数据库导入另一个数据库mysql导入excel数据的步骤:1、第一步我们得到了一个excel表,里面有很多需要我们导入的数据。2、删除第1行”准考证号””XXX”….只保留我们需要的数据部分。3、单击”文件”–“另存为”,类型选择为”CSV(逗号分隔)(*.csv)”,将excel表另存为csv文档。中间不管提示什么一律”是”就好了…重点!另存为的slyar.csv是可以用记事本或者Editplus等文本编辑…

  • js如何实现页面跳转_js当前页面跳转

    js如何实现页面跳转_js当前页面跳转文章转载自:  js页面跳转的几种代码    http://www.studyofnet.com/news/185.html 页面跳转方式 1.在原来的窗体中直接跳转用window.location.href=”你所要跳转的页面”;window.history.back(-1);返回上一页window.history.history.back()wind

  • 粒子群优化算法(PSO)简介及MATLAB实现[通俗易懂]

    粒子群优化算法(PSO)简介及MATLAB实现[通俗易懂]目录粒子群优化算法概述PSO算法步骤PSO(粒子群优化算法)与GA(遗传算法)对比PSO的MATLAB实现粒子群优化算法概述•粒子群优化(PSO,particleswarmoptimization)算法是计算智能领域,除了蚁群算法,鱼群算法之外的一种群体智能的优化算法,该算法最早由Kennedy和Eberhart在1995年提出的,该算法源自对鸟类捕食问题的研究。…

  • pycharm注释的快捷键_pycharm注释比较多怎么办

    pycharm注释的快捷键_pycharm注释比较多怎么办用鼠标选中需要注释的代码,三次按下:shift+‘即可快速注释

发表回复

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

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