事件捕获：
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>新闻热点
疑难解答
