有这么一段小程序
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）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
二、什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
三、阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。
看上面的例子，在没有阻止事件冒泡之前，其实是#panel的click事件，而不是我们选择的.head对象的事件,用bind(),live(),delegate() 方法，阻止事件冒泡。