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>

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript)