第二十六节 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>
标签：jQuery,function,第二十六,click,height,冒泡,background,alert,event 来源： https://www.cnblogs.com/kogmaw/p/12493814.html