举一个小例子，说明下对冒泡的理解
准备工作与目的
首先，先写html，就是一个按钮+一个浮层，再加上点css
<body>
<div id="wrap">
<button id="clickme">Click Me</button>
<div id="fuceng">
gone with the wind
</div>
</div>
</body>
然后，写点js实现功能：点击ClickMe按钮弹出gone with the wind浮层，点击别的地方隐藏浮层
<script>
$("#clickme").on("click",function(){
console.log("clickme-clicked");
$("#fuceng").show();
})
$(document).on("click",function(){
console.log("document-clicked");
$("#fuceng").hide();
})
</script>不难理解，点击$("#clickme")把$("#fuceng") show()出来，点击文档$(document)把$("#fuceng") hide()掉
问题的产生
在单击$("#clickme")的时候并没有显示$("#fuceng")，为什么？？？见下图
问题解释：遇到事件时，先按照黑色箭头方向从祖先问到自己：捕捉事件，然后再按照红色箭头从自己问到祖先：冒泡事件。问的内容是：某某元素被xxx（事件名）了，你是否有函数要操作？
本例中，没有捕捉阶段，直接到冒泡阶段。$("#clickme")被点击后，操作了自己的函数：$("#fuceng").show();。那为什么$("#fuceng")不显示呢？？？因为冒泡还没结束，问过$("#clickme")后又问到了它的祖先$(document)：你的一个子孙被点击了，你有函数要操作吗？有！！！然后操作了它的函数$("#fuceng").hide();，所以又被隐藏了。。。
为了显示过程，在两个函数里分别加上console.log，结果见下图。
说明，先执行了$("#clickme")的函数，后执行了$(document)的函数。
问题的解决
简单再描述一遍，就是我们同时在按钮和页面上绑定了onclick事件，结果就是触发按钮的onclick同时也触发了页面的onclick，因为按钮在页面里面。
其中一个解决方法就是，当触发按钮的onclick时，阻止冒泡事件再往上通知，示意图如下。
代码如下：
<script>
$("#clickme").on("click",function(){
console.log("clickme-clicked");
$("#fuceng").show();
})
//新添加的代码
$("#wrap").on("click",function(e){
e.stopPropagation();
})
$(document).on("click",function(){
console.log("document-clicked");
$("#fuceng").hide();
})
</script>在按钮的父元素$("#wrap")上添加onclick事件，来阻止按钮的onclick再向上通知。在$("#wrap")上阻止冒泡事件，使得无论在点击按钮还是显现出来的浮层都不会使浮层消失。
优化
假使页面中有很多个浮层，像上面这样每一个浮层都监听一次$(document)会大大的占用内存，所以思路是使用one()方法，只在点击按钮的时候监听一次$(document)，代码如下：
<script>
$("#clickme").on("click",function(e){
$("#fuceng").show();
//新增代码
$(document).one("click",function(){
$("#fuceng").hide();
})
})
$("#wrap").on("click",function(e){
e.stopPropagation();
})
</script>优化探究
上述优化代码能否简单成下面这样呢？
<script>
$("#clickme").on("click",function(e){
$("#fuceng").show();
//新增代码
$(document).one("click",function(){
$("#fuceng").hide();
})
})
</script>你看，我在点击按钮的时候只监听一次$("document")，又没有再点击页面了，应该没问题吧？有问题！！！如下图。
点击按钮（蓝色箭头），调用里面的函数，执行①、执行②。注意，这里执行②就是再给页面添加了一个点击事件，且，在执行按钮的点击事件时，冒泡事件的追问是停止的。等调用完了，再接着问按钮的父辈、祖辈们按钮被点击了，你有没有函数需要调用啊？又问到了页面，这时候页面是有函数的，就是之前执行的②。
其实，除了使用阻止冒泡的方式阻止事件的传播，还可以使用setTimeout方法，使需要绑定给页面的函数在冒泡询问完成后再绑定。
<script>
$("#clickme").on("click",function(e){
$("#fuceng").show();
setTimeout(function(){
$(document).one("click",function(){
$("#fuceng").hide();
})
},0)
})
</script>使用setTimeout展现冒泡过程
html：
<body>
<div id="red">
<div id="orange">
<div id="yellow">
<div id="green">
<div id="blue">
<div id="indigo">
<div id="purple"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>css：
#red.active{
background: red;
}
#orange.active{
background: orange;
}
#yellow.active{
background: yellow;
}
#green.active{
background: green;
}
#blue.active{
background: blue;
}
#indigo.active{
background: indigo;
}
#purple.active{
background: purple;
}
#purple{
min-height: 100px;
}
div{
margin:10px;
border: 1px solid black;
}js:
var n=0;
$("div").on("click",function(e){
setTimeout(function(){
$(e.currentTarget).addClass("active");
},n*1000)
n+=1;
})效果：
解释：
html和css很好理解。js的意思就是点击$("div")的时候，添加active类，即展现了背景颜色。本例中，点击最内层<div id="purple"></div>的时候，冒泡事件开始询问。
- purple，等候
n*1000后添加active类，立即执行n+=1 - indigo，等候
n*1000后添加active类，立即执行n+=1 - blue，等候
n*1000后添加active类，立即执行n+=1 - green，等候
n*1000后添加active类，立即执行n+=1 - yellow，等候
n*1000后添加active类，立即执行n+=1 - orange，等候
n*1000后添加active类，立即执行n+=1 - red，等候
n*1000后添加active类，立即执行n+=1
我们该明白的是，所有事情是一步一步做的，即询问下一个div时，n都是已经加过1了，而且，选择器是$("div")，所以，所有div都绑定了事件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。