Javascript 事件对象(三)事件冒泡

事件流
---事件冒泡
取消冒泡:ev.cancelBubble=true

---事件捕获
Ie下是没有的,在绑定事件中,标准下是有的

 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: 40px;}

 8 #div1 {background:red}

 9 #div2 {background:green}

10 #div3 {background:blue; position: absolute; top: 300px;}

11 </style>

12 <script>

13 window.onload = function() {

14     

15     /*

16         事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制

17     */

18     

19     var oDiv1 = document.getElementById('div1');

20     var oDiv2 = document.getElementById('div2');

21     var oDiv3 = document.getElementById('div3');

22     

23     function fn1() {

24         alert( this.id );

25     }

26     

27     //oDiv1.onclick = fn1;  给**加事件,给元素加事件处理函数

28     //事件函数绑定

29     oDiv1.onclick = fn1;//告诉div1,如果他接收到了一个点击事件,那么他就去执行fn1

30     //oDiv2.onclick = fn1;

31     oDiv3.onclick = fn1;

32     

33     //我在马路边捡到一分钱,把他交个警察叔叔

34     /*我.on马路边捡到一分钱 = function() {

35         把他交个警察叔叔

36     }*/

37     

38 }

39 </script>

40 </head>

41 

42 <body>

43     <div id="div1">

44         <div id="div2">

45             <div id="div3"></div>

46         </div>

47     </div>

48 </body>

49 </html>

 

事件冒泡实例:(侧边栏分享)

 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 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}

 8 #div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}

 9 </style>

10 <script>

11 window.onload = function() {

12     

13     var oDiv = document.getElementById('div1');

14     

15     oDiv.onmouseover = function() {

16         this.style.left = '0px';

17     }

18     

19     oDiv.onmouseout = function() {

20         this.style.left = '-100px';

21     }

22     

23 }

24 </script>

25 </head>

26 

27 <body>

28     <div id="div1">

29         <div id="div2">分享到</div>

30     </div>

31 </body>

32 </html>

 

 

取消事件冒泡实例:(点击出现下拉框)

 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 #div1 {width:100px; height:200px; border: 1px solid red; display: none;}

 8 </style>

 9 <script>

10 window.onload = function() {

11     

12     /*

13     阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

14     */

15     

16     var oBtn = document.getElementById('btn');

17     var oDiv = document.getElementById('div1');

18     

19     oBtn.onclick = function(ev) {

20         var ev = ev || event;

21         

22         ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡

23         

24         oDiv.style.display = 'block';

25     }

26     

27     /*oBtn.onmouseover = function(ev) {

28         var ev = ev || event;

29         

30         ev.cancelBubble = true;

31     }*/

32     

33     document.onclick = function() {

34         /*setTimeout(function() {

35             oDiv.style.display = 'none';

36         }, 1000);*/

37         

38         oDiv.style.display = 'none';

39     }

40     

41 }

42 </script>

43 </head>

44 

45 <body>

46     <input type="button" value="按钮" id="btn" />

47     <div id="div1"></div>

48     

49     <p>ppppp</p>

50     <p>ppppp</p>

51     <p>ppppp</p>

52     <p>ppppp</p>

53 </body>

54 </html>

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript)