上一篇教程中我们说到jquery中的$(document).ready()方法和window.onload方法区别，其实就是在为写jquery的事件相关的教程打下基础的。今天我们来看看关于冒泡事件的一些东西。
说到javascript中的冒泡事件，那么首先我们得明白什么是冒泡事件
就是当设定了多个div的嵌套时，即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。（这里只是举个例子点击事件，当然了，还有其它很多事件，比如鼠标的mouseover等等也都会触发冒泡事件）。
下面来看一个简单的在线DEMO，让大家看看到底冒泡事件是咋样的。
1 |
<div id="divOne" onclick="alert('我是最外层');">
|
2 |
<div id="divTwo" onclick="alert('我是中间层！')">
|
3 |
<a id="hr_three" href="http://www.skygq.com" onclick="alert('我是最里层！')">点击我</a>
|
4 |
</div>
|
5 |
</div>
|
看上面的html代码，分为三层，divOne是第外层，divTwo中间层，hr_three是最里层，
他们都有各自的click事件，最里层a标签还有href属性。
运行页面，点击“点击我”,会依次弹出：我是最里层—->我是中间层—->我是最外层
—->然后再链接到梦三秋博客.
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：hr_three—-> divTwo—-> divOne 。从最里层冒泡到最外层。
那么当我们想点击最里面的链接时，只想链接到梦三秋博客，而不想触发上面两个div绑定的click事件，我们该怎么办呢？
-
event.stopPropagation();
使用这个方法，在事件处理过程中，会阻止了事件冒泡，但不会阻击默认行为（比如链接的跳转）
下面来看jquery代码：1$(function() {2$("#hr_three").click(function(event) {3event.stopPropagation();4});5});运行上面的DEMO，点击DEMO中的链接，就只会链接到梦三秋博客，而不会触发两个div绑定的单击事件
-
return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如超链接的跳转）运行上面的DEMO，点击DEMO中的链接，你会发现没有任何反应~~
-
.event.preventDefault();
这个方法和冒泡事件有一点点关系，但是关系不是很大。
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（超链接跳转）运行上面的DEMO，点击DEMO中的链接，你会发现依次弹出：我是最里层—->我是中间层—->我是最外层，但最后却没有跳转到梦三秋博客
最后再给大家看一个例子，大家自己理解去吧~呵呵·~