4.1.4: jQuery的事件冒泡

浏览数：16 / 时间：2015年06月09日

1. 什么是冒泡:

在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。代码如下：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <style type="text/css">
 6 *{
 7     margin:0;
 8     padding:0
 9 }
10 body{
11     font-size:13px;
12     line-height:130%;
13     padding:60px
14 }
15 #content{
16     width:220px;
17     border:1px solid #0050D0;
18     background:#96E555
19 }
20 span{
21     width:200px;
22     margin:10px;
23     background:#666666;
24     cursor:pointer;
25     color:white;
26     display:block
27 }
28 p{
29     width:200px;
30     background:#888;
31     color:white;
32     height:16px
33 }
34 </style>
35 <script src="jQuery/jquery-1.3.1.js"></script>
36 <script type="text/javascript">
37     $(function(){
38         $("span").bind("click",function(){
39             var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
40             $("#msg").html(txt);
41         });
42         $("#content").bind("click",function(){
43             var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
44             $("#msg").html(txt);
45         });
46         $("body").bind("click",function(){
47             var txt=$("#msg").html()+"<p>body元素被单击</p>";
48             $("#msg").html(txt);
49         });
50     });
51 </script>
52 </head>
53 <body>
54 <div id="content">
55     外层div元素
56         <span>内层span元素</span>
57     外层div元素
58 </div>
59 
60 <div id="msg"></div>
61 </body>
62 </html>