举一个小例子，说明下对冒泡的理解
准备工作与目的
首先，先写html，就是一个按钮+一个浮层，再加上点css
gone with the wind
然后，写点js实现功能：点击ClickMe按钮弹出gone with the wind浮层，点击别的地方隐藏浮层
不难理解，点击$("#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时，阻止冒泡事件再往上通知，示意图如下。
代码如下：
在按钮的父元素$("#wrap")上添加onclick事件，来阻止按钮的onclick再向上通知。在$("#wrap")上阻止冒泡事件，使得无论在点击按钮还是显现出来的浮层都不会使浮层消失。
优化
假使页面中有很多个浮层，像上面这样每一个浮层都监听一次$(document)会大大的占用内存，所以思路是使用one()方法，只在点击按钮的时候监听一次$(document)，代码如下：
优化探究
上述优化代码能否简单成下面这样呢？
你看，我在点击按钮的时候只监听一次$("document")，又没有再点击页面了，应该没问题吧？有问题！！！如下图。
点击按钮（蓝色箭头），调用里面的函数，执行①、执行②。注意，这里执行②就是再给页面添加了一个点击事件，且，在执行按钮的点击事件时，冒泡事件的追问是停止的。等调用完了，再接着问按钮的父辈、祖辈们按钮被点击了，你有没有函数需要调用啊？又问到了页面，这时候页面是有函数的，就是之前执行的②。
其实，除了使用阻止冒泡的方式阻止事件的传播，还可以使用setTimeout方法，使需要绑定给页面的函数在冒泡询问完成后再绑定。
使用setTimeout展现冒泡过程
html：
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都绑定了事件。