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 width:1000px">
44 <div id="box1">我是box1
45 <span id="span">我是span</span>
46 </div>
47 </body>
48 </html>
