事件流---事件冒泡取消冒泡：ev.cancelBubble=true---事件捕获Ie下是没有的，在绑定事件中，标准下是有的
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div {padding: 40px;} 8 #div1 {background:red} 9 #div2 {background:green}10 #div3 {background:blue; position: absolute; top: 300px;}11 </style>12 <script>13 window.onload = function() {14 15 /*16 事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制17 */18 19 var oDiv1 = document.getElementById('div1');20 var oDiv2 = document.getElementById('div2');21 var oDiv3 = document.getElementById('div3');22 23 function fn1() {24 alert( this.id );25 }26 27 //oDiv1.onclick = fn1; 给**加事件，给元素加事件处理函数28 //事件函数绑定29 oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn130 //oDiv2.onclick = fn1;31 oDiv3.onclick = fn1;32 33 //我在马路边捡到一分钱，把他交个警察叔叔34 /*我.on马路边捡到一分钱 = function() {35 把他交个警察叔叔36 }*/37 38 }39 </script>40 </head>41 42 <body>43 <div id="div1">44 <div id="div2">45 <div id="div3"></div>46 </div>47 </div>48 </body>49 </html>事件冒泡实例：（侧边栏分享）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;} 8 #div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;} 9 </style>10 <script>11 window.onload = function() {12 13 var oDiv = document.getElementById('div1');14 15 oDiv.onmouSEOver = function() {16 this.style.left = '0px';17 }18 19 oDiv.onmouseout = function() {20 this.style.left = '-100px';21 }22 23 }24 </script>25 </head>26 27 <body>28 <div id="div1">29 <div id="div2">分享到</div>30 </div>31 </body>32 </html>取消事件冒泡实例：（点击出现下拉框）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height:200px; border: 1px solid red; display: none;} 8 </style> 9 <script>10 window.onload = function() {11 12 /*13 阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;14 */15 16 var oBtn = document.getElementById('btn');17 var oDiv = document.getElementById('div1');18 19 oBtn.onclick = function(ev) {20 var ev = ev || event;21 22 ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡23 24 oDiv.style.display = 'block';25 }26 27 /*oBtn.onmouseover = function(ev) {28 var ev = ev || event;29 30 ev.cancelBubble = true;31 }*/32 33 document.onclick = function() {34 /*setTimeout(function() {35 oDiv.style.display = 'none';36 }, 1000);*/37 38 oDiv.style.display = 'none';39 }40 41 }42 </script>43 </head>44 45 <body>46 <input type="button" value="按钮" id="btn" />47 <div id="div1"></div>48 49 <p>ppppp</p>50 <p>ppppp</p>51 <p>ppppp</p>52 <p>ppppp</p>53 </body>54 </html>新闻热点
疑难解答
