1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function() 9 { 10 /* 11 事件的冒泡(Bubble) 12 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发是，其祖先元素的_(:з」∠)_ 13 相同事件也会被触发 14 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡 15 */ 16 var span=document.getElementById("span"); 17 span.onclick=function(event){ 18 event=event||window.event; 19 alert("span"); 20 //取消冒泡 将事件对象的cancelBubble设置为true，即可取消冒泡 21 event.cancelBubble=true; 22 }; 23 var box1=document.getElementById("box1"); 24 box1.onclick=function(){ 25 alert("box1"); 26 }; 27 document.body.onclick=function(){ 28 alert("body"); 29 }; 30 }; 31 </script> 32 <style type="text/css"> 33 #box1{ 34 width:200px; 35 height:200px; 36 background-color:yellowgreen; 37 } 38 #span{ 39 background-color:yellow; 40 } 41 42 </style> 43 <body style="height:1000px 1000px"> 44 <div id="box1">我是box1 45 <span id="span">我是span</span> 46 </div> 47 </body> 48 </html>