. 1 <! DOCTYPE HTML > 2 < HTML > . 3 < head > . 4 < Meta charset = "UTF-. 8" > . 5 < title > </ title > . 6 </ head > . 7 < Script type = "text / JavaScript" > . 8 the window.onload = function () . 9 { 10 / * . 11 event bubbling (Bubble) 12 is a so-called bubbling refers to the upward conduction event, when the event trigger is a descendant element is its ancestor elements _ (: з "∠) _ 13 The same event will be triggered 14 most cases bubbling it is useful in development, if you do not want to happen bubbling event bubbling can be canceled by the event object 15 * / 16 var span = document.getElementById ( " span " ) ; . 17 span.onclick = function (event) { 18 is event = event || the window.event; . 19 Alert ( " span " ); 20 is // cancel the bubbling cancelBubble event object set to true, to cancel bubbling 21 event.cancelBubble = to true ; 22 is }; 23 is 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 width:1000px"> 44 <div id="box1">我是box1 45 <span id="span">我是span</span> 46 </div> 47 </body> 48 </html>