前言：
当前看官们对“css3爱心冒泡”大致比较重视，同学们都需要分析一些“css3爱心冒泡”的相关内容。那么小编也在网络上汇集了一些有关“css3爱心冒泡””的相关内容，希望咱们能喜欢，兄弟们快快来了解一下吧！javascript事件基础-事件流
#JavaScript#
事件流就是多个节点对象对同一个事件进行响应的先后顺序。
1.冒泡型
事件从上向下进行响应，称冒泡
实例1.含五层嵌套的Div标签，当点击Div事件时，对象边框边红色，并抓取标签名。
代码演示
浏览结果
点击click事件，从内到外一次响应。
完整代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title><style type="text/css">div{ margin:20px; border:solid 1px blue; font-size:18px; }</style><script>function Bubble(){ var div=document.getElementsByTagName('div'); var show=document.getElementById("show"); for(var i=0;i<div.length;i++) //遍历Div元素 { div[i].onclick=(function(i) { return function(){ //返回闭包函数 div[i].style.border='1px dashed red'; //点击变红 show.innerHTML+=div[i].className+">";//标识响应顺序 } })(i); }}window.onload=Bubble;</script> </head> <body> <div class="div-1">div-1 <div class="div-2">div-2 <div class="div-3">div-3 <div class="div-4">div-4 <div class="div-5">div-5 </div> </div> </div> </div></div><p id="show"></p> </body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css3爱心冒泡
