首页 > 代码库 > 事件捕获和事件冒泡（二）
事件捕获和事件冒泡（二）
事件冒泡
当一个元素接受到事件的时候，会把它接收到的所有事件传播给它的父级，一直到顶层window，叫事件冒泡机制；
例子：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>事件冒泡</title> <style> div{padding:40px;} #div1{ background: red; } #div2{ background:green; } #div3{background: blue;} </style> <script> window.onload=function(){ var oDiv1=document.getElementById(‘div1‘); var oDiv2=document.getElementById(‘div2‘); var oDiv3=document.getElementById(‘div3‘); function fn1(){ alert(this.id); } //事件函数绑定 oDiv1.onclick=fn1;//告诉div1，如果它接收到了一个点击事件，那它就去执行fn1 oDiv2.onclick=fn1; oDiv3.onclick=fn1;//div3,div1 事件冒泡 } </script></head><body><div id="div1"> <div id="div2"> <div id="div3"></div> </div></div></body></html>
<iframe style="width: 100%; height: 300px" src=" https://jsfiddle.net/v2yjremt/embedded/result,js,html,css/"></iframe>
阻止冒泡：在当前要阻止冒泡的事件函数中调用event.cancelBubble=true;
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>阻止冒泡</title> <style> #div1{ width:100px; height:200px; border:1px solid red; display: none; } </style> <script> window.onload=function(){ var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function(ev){ var oEvent=ev||event; //阻止当前事件函数事件冒泡 oEvent.cancelBubble=true; oDiv.style.display=‘block‘; } document.onclick=function(){ /* setTimeout(function(){//观察事件冒泡：div出现一秒钟后隐藏了 oDiv.style.display=‘none‘; },1000);*/ oDiv.style.display=‘none‘; } } </script></head><body><input type="button" value="按钮" id="btn1"><div id="div1">点击按钮div就出现，点击除按钮以外的部分div就消失</div></body></html>
<iframe style="width: 100%; height: 300px" src=" https://jsfiddle.net/7f5qgLm3/embedded/result,js,html,css/"></iframe>
对比没有取消冒泡事件时的效果，下面用了延时器一遍观察效果
<iframe style="width: 100%; height: 300px" src=" https://jsfiddle.net/7f5qgLm3/1/embedded/result,js,html,css/"></iframe>
事件冒泡的运用
下面是一个网站中常见的功能——分享到
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>事件冒泡</title> <style> #div1{ width:100px; height:200px; background: red; position: absolute; left:-100px; top:100px; } #div2{ width:30px; height:60px; position: absolute; right:-30px; top:70px; background:#000000; color:#ffffff; text-align: center; } </style> <script> window.onload=function(){ var oDiv=document.getElementById(‘div1‘); oDiv.onmouseover=function(){ this.style.left=0+‘px‘;//鼠标移动到div2时，div2接收到over、out事件时它自己不做，传播给父级div1执行 } oDiv.onmouseout=function(){ this.style.left=-100+‘px‘; } } </script></head><body><div id="div1"> <div id="div2">分享到</div></div></body></html>
效果：
<iframe style="width: 100%; height: 300px" src=" https://jsfiddle.net/aLurk1p1/embedded/result,js,html,css/"></iframe>
事件捕获和事件冒泡（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。