事件捕获：
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>