第55天：簡單冒泡方法原理
一、冒泡原理
事件冒泡: 當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。
順序
E 6.0:
div -> body -> html -> document
其他瀏覽器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
二、 阻止冒泡的方法
標準瀏覽器 和 ie瀏覽器
w3c的方法是event.stopPropagation()
IE則是使用event.cancelBubble = true
兼容的寫法：
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 標準
}
else
{
event.cancelBubble = true; // ie 678 ie瀏覽器
}
三、判斷當前對象
火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
兼容性寫法：
var targetId = event.target ? event.target.id : event.srcElement.id;
targetId != "show"
四、案例：點擊空白處隱藏盒子
這個案例就是說，一個盒子，點擊除了自己之外的任何一個地方，就會隱藏。
原理：
點擊自己不算
點擊空白處 就是點擊 document
案例代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>點擊空白處隱藏盒子</title> 6 <style> 7 body{ 8 height: 2000px; 9 } 10 #mask{ 11 width: 100%; 12 height: 100%; 13 opacity:0.4;/*半透明 標準瀏覽器*/ 14 filter: alpha(opacity=40);/*IE6半透明*/ 15 background-color: black; 16 position: fixed; 17 top:0; 18 left:0; 19 display: none; 20 } 21 #show{ 22 width: 300px; 23 height: 300px; 24 background-color: #fff; 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 margin-top: -150px; 29 margin-left: -150px; 30 display: none; 31 } 32 </style> 33 </head> 34 <body> 35 <a href="javascript:;" id="login">註冊</a> 36 <a href="javascript:;">登錄</a> 37 <div id="mask"></div> 38 <div id="show"></div> 39 </body> 40 </html> 41 <script> 42 function $(id){return document.getElementById(id);} 43 var login=document.getElementById("login"); 44 login.onclick=function(event){ 45 $("mask").style.display="block"; 46 $("show").style.display="block"; 47 document.body.style.overflow="hidden";//不顯示滾動條 48 //取消冒泡 49 var event=event||window.event; 50 if(event&&event.stopPropagation){ 51 event.stopPropagation(); 52 }else{ 53 event.cancelBubble=true; 54 } 55 56 } 57 document.onclick=function(event){ 58 var event=event||window.event; 59 //alert(event.target.id);//返回的是點擊的某個對象的id 標準 60 //alert(event.srcElement.id);//IE6 7 8 61 var targetId=event.target ? event.target.id : event.srcElement.id;//兼容性寫法 62 if(targetId!="show"){//不等於當前點擊的名字 63 $("mask").style.display="none"; 64 $("show").style.display="none"; 65 document.body.style.overflow="visible";//顯示滾動條 66 } 67 } 68 </script>
第55天：簡單冒泡方法原理