事件捕获

 1 window.onload = function() {
 2         
 3     var oDiv1 = document.getElementById(‘div1‘);
 4     var oDiv2 = document.getElementById(‘div2‘);
 5     var oDiv3 = document.getElementById(‘div3‘);
 6     
 7     function fn1() {
 8         alert( this.id );
 9     }
10     
11     /*oDiv1.onclick = fn1;
12     oDiv2.onclick = fn1;
13     oDiv3.onclick = fn1;*/
14     
15     //false = 冒泡
16     
17     //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
18     /*oDiv1.addEventListener(‘click‘, fn1, false);
19     oDiv2.addEventListener(‘click‘, fn1, false);
20     oDiv3.addEventListener(‘click‘, fn1, false);*/
21     
22     //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
23     /*oDiv1.addEventListener(‘click‘, fn1, true);
24     oDiv2.addEventListener(‘click‘, fn1, true);
25     oDiv3.addEventListener(‘click‘, fn1, true);*/
26     
27     oDiv1.addEventListener(‘click‘, function() {
28         alert(1);
29     }, false);
30     oDiv1.addEventListener(‘click‘, function() {
31         alert(3);
32     }, true);
33     oDiv3.addEventListener(‘click‘, function() {
34         alert(2);
35     }, false);
36 }

1 <div id="div1">
2     <div id="div2">
3             <div id="div3"></div>
4      </div>
5 </div>