事件冒泡

有这么一段小程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <link rel="stylesheet" type="text/css" href="css/style.css">
 8 <script type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
 9 <script type="text/javascript">
10     $(function(){
11     $('#panel h5.head').click(function{
12         $(this).next().show();
13         })
14     })
15 </script>
16 <body>
17 <div id="panel">
18     <h5 class="head">什么是jQuery?</h5>
19     <div class="content">
20         jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
21     </div>
22 </div>
23 </body>
24 </html>

运行，华丽丽的一个错误，为什么，为什么，选择器没错吧，事件没错吧，那你效果为什么不出来，旁边同事来了句，事件冒泡~~~

于是百度后，代码改成介个样子：

1 <script type="text/javascript">
2     $(function(){
3     $('#panel h5.head').bind('click',function(){
4         $(this).next().show();
5         });
6     })
7 </script>

OK，问题解决了，接下来对事件冒泡做个解释

一、什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

二、什么是事件冒泡

三、阻止事件冒泡

通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。

看上面的例子，在没有阻止事件冒泡之前，其实是#panel的click事件，而不是我们选择的.head对象的事件,用bind(),live(),delegate() 方法，阻止事件冒泡。