第二十六节 jQuery中的事件冒泡 

 1 <!-- 什么是事件冒泡：在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么次事件就会调用这个处理程序，如果没有定义次事件的处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
 2 
 3      冒泡事件的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父元素上，避免把事件处理器添加到多个子元素上），它还可以让你在对象层的不同级别捕获事件。
 4 
 5      阻止事件冒泡：事件冒泡的机制有时候是不需要的，需要阻止掉，通过event.StopPropagation()来阻止 -->
 6 
 7 
 8 <!DOCTYPE html>
 9 <html lang="en">
10 <head>
11     <meta charset="UTF-8">
12     <title>Document</title>
13     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
14     <script type="text/javascript">
15         $(function(){
16             $('.son').click(function(event){
17                 // event参数表示代表事件本身的对象，通过第一个参数传递；
18                 alert('1');
19 
20                 // event.stopPropagatio阻止事件冒泡；
21                 event.stopPropagation();
22                 // 阻止默认行为（如表单提交）
23                 envnt.preventDefault(); 
24 
25                 return false;
26                 // 上面两个可以合并成这个，既可以阻止事件冒泡，又可以阻止默认行为
27             })
28 
29             $('.father').click(function(){
30                 alert('2');
31             })
32 
33             $('.grandfather').click(function(){
34                 alert('3');
35             })
36 
37 
38             // document 是最顶级的标签，比body还大
39             $(document).click(function(){
40                 alert('4');
41             });
42         });
43     </script>
44     <style type="text/css">
45         .grandfather{
46             width: 300px;
47             height: 300px;
48             background-color: green;
49         }
50         .father{
51             width: 200px;
52             height: 200px;
53             background-color: gold;
54         }
55         .son{
56             width: 100px;
57             height: 100px;
58             background-color: red;
59         }
60     </style>
61 </head>
62 <body>
63     <div class="grandfather">
64         <div class="father">
65             <div class="son"></div>
66         </div>
67     </div>
68 </body>
69 </html>

 

posted @ 2020-03-14 19:46  kog_maw  阅读(131)  评论(0)    收藏  举报