<script src="js/冒泡.js"></script> <script type=text/javascript> </script> <style> body{ margin:0px; padding:0px; } #div1{ width:300px; height:200px; background:#CC3; margin:30px auto 0px 10px; position:relative; } #div2{ width:300px; height:200px; background:#096; position:absolute; left:310px; } #div11{ margin-left:10px; } </style> </head> <body id='obody'> <div id='div1' class='div1'> xxxxxx <div id='div11' class='div1'>fasdfa</div> </div> <div id='div2' class='div1'> </div> <div id='div3' class='div1' style="width:200px"> <div id='div31' class='div1'></div> </div> </body>
//冒泡 //若有结构如body--div1--div11 冒泡就是从div11--div1--body每一个节点都会触发事件 //来一例子 window.onload=function(){ /* document.getElementById('obody').onclick=function(evt){ var e=evt||winow.event; console.info("返回触发此事件的元素: "+e.target+" "+"返回其事件监听器触发该事件的元素: "+e.currentTarget); console.info("返回触发此事件的元素id: "+e.target.id+" "+"返回其事件监听器触发该事件的元素id: "+e.currentTarget.id); //结果对比下 //返回触发此事件的元素: [object HTMLDivElement] 返回其事件监听器触发该事件的元素: [object HTMLBodyElement] //冒泡.js:9 返回触发此事件的元素id: div1 返回其事件监听器触发该事件的元素id: obody //冒泡.js:8 返回触发此事件的元素: [object HTMLDivElement] 返回其事件监听器触发该事件的元素: [object HTMLBodyElement] //冒泡.js:9 返回触发此事件的元素id: div11 返回其事件监听器触发该事件的元素id: obody }; */ //由冒泡特性,如果我对body--div1--div三个节点分别添加了事件,根据其特性可知,点了div11,他的事件会触发,div1也会,当然包括body了 //所以有个要解决的问题就是,点了div11就触发div11的事件, //解决方案有两种,一种不让它向上冒泡,第二种就是代理了,第一种是有缺点的 //第一种 document.getElementById('obody').onclick=function(evt){ var e=evt||winow.event; console.info("谢谢光顾body"); }; document.getElementById('div11').onclick=function(evt){ var e=evt||winow.event; console.info("谢谢光顾div11"); e.stopPropagation(); //换一种不行 //e.preventDefault();//通知浏览器不要执行与事件关联的默认动作 //事件传播和默认操作是二个不同的机制, //一个是向上冒泡 一个是执行默认操作 }; //测试结果ok //第二种 //为了正常的向上冒泡,那就用代理吧(听起来可怕,实现起来很简单) /* document.getElementById('obody').onclick=function(evt){ var e=evt||winow.event; if(e.target.id=='div11'){ console.info("谢谢光顾div11"); }else if(e.target.id=='obody'){ console.info("谢谢光顾body"); } }; */ };
//到此结束
相关推荐
本段代码演示了如何使用JavaScript取消HTML事件的冒泡,即当后代元素的事件被触发时,祖先元素的相同事件也会被触发。代码中,页面包含一个div元素和一个嵌套在其中的span元素,分别设置了单击响应函数。当单击span...
然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的。本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项。 如果你对JavaScript事件冒泡还没有什么印象...
直接运行html 文件即可,第一个文本框为要排序的数字,第二位为排序后的现实的地方
JavaScript事件冒泡示例,简单,明了,实用。
并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,focus事件, load事件 2、事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素。 js事件捕获一般通过DOM2事件模型...
主要介绍了javascript事件冒泡实原理,实例分析了事件冒泡的定义及实现技巧,需要的朋友可以参考下
使用JavaScript实现的冒泡排序算法:
2022年生动详细解释javascript的冒泡和捕获.docx
冒泡排序
冒泡排序执行过程分析数列: 4, 1, 3, 5, 2 1, 3, 4, 2, 51,4,3,5,2 => 1,3,4,5,2 => 1,3,4,5,2 =>
一种解决事件冒泡的方法,有较好的浏览器兼容性,具体思路参见文档: http://blog.csdn.net/ivyandrich/article/details/22041933
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
主要介绍了JavaScript事件冒泡与事件捕获,结合实例形式分析了事件冒泡、阻止冒泡以及事件捕获的相关原理、操作技巧与注意事项,需要的朋友可以参考下
js冒泡排序
主要向大家介绍了javascript事件冒泡,以及javascript阻止事件冒泡的实现代码,感兴趣的朋友可以参考一下
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
js冒泡排序,冒泡排序的工作原理,我们有一个未排序的数组arr = [ 1, 4, 2, 5, -2, 3 ]任务是使用冒泡排序对数组进行排序。 冒泡排序比较索引 0 中的元素,如果第 0 索引大于第 1 索引,则交换值,如果第 0 索引...