事件流
---事件冒泡
取消冒泡：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，如果他接收到了一个点击事件，那么他就去执行fn1
30     //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>