事件的冒泡 

 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>

 

posted @ 2019-07-28 11:55  zuiaimiusi  阅读(136)  评论(0)    收藏  举报