Javascript 事件对象（五）事件捕获

事件捕获：
 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: 50px;}
 8 #div1 {background: red;}
 9 #div2 {background: blue;}
10 #div3 {background: green; position: absolute; top: 300px;}
11 </style>
12 <script>
13 window.onload = function() {
14         
15     var oDiv1 = document.getElementById('div1');
16     var oDiv2 = document.getElementById('div2');
17     var oDiv3 = document.getElementById('div3');
18     
19     function fn1() {
20         alert( this.id );
21     }
22     
23     /*oDiv1.onclick = fn1;
24     oDiv2.onclick = fn1;
25     oDiv3.onclick = fn1;*/
26     
27     //true  = 进去的事件
28     //false = 出去的事件
29     
30     //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
31     /*oDiv1.addEventListener('click', fn1, false);
32     oDiv2.addEventListener('click', fn1, false);
33     oDiv3.addEventListener('click', fn1, false);*/
34     
35     //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
36     /*oDiv1.addEventListener('click', fn1, true);
37     oDiv2.addEventListener('click', fn1, true);
38     oDiv3.addEventListener('click', fn1, true);*/
39     
40     oDiv1.addEventListener('click', function() {
41         alert(1);
42     }, false);
43     oDiv1.addEventListener('click', function() {
44         alert(3);
45     }, true);
46     oDiv3.addEventListener('click', function() {
47         alert(2);
48     }, false);
49     //
50     
51 }
52 </script>
53 </head>
54 
55 <body>
56     <div id="div1">
57         <div id="div2">
58             <div id="div3"></div>
59         </div>
60     </div>
61 </body>
62 </html>