相关推荐：《
javascript视频教程
》
JS事件流原理图：
由此可知道，一个完整的JS事件流是从window开始，最后回到window的一个过程；事件流被分为三个阶段：捕获过程（1~5）、目标过程（5~6）、冒泡过程（6~10）；
立即学习
“
Java免费学习笔记（深入）
”；
事实上，捕获过程和冒泡过程是完全相反的过程，即事件由父元素向子元素传播和子元素向父元素传播的过程。
事件捕获
事件捕获在事件绑定的第二种形式下才能实现
上面例子中，点击p3时，p1会接收到两个点击事件，一个是在捕获阶段触发了p1的点击事件，一个是在冒泡阶段触发了p1的点击事件；addEventListener中的第三个参数：true----捕获，false-----冒泡；上面设置为true即捕获阶段的点击事件被触发了
注：p1会接收到两个点击事件与是否触发该事件无关
再来个例子：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
点击p3，查看弹出的结果分别是：3、2、1
点击p3时，p1会接收到两个点击事件，在捕获阶段（true），触发了p1的点击事件，弹出结果：3；在冒泡阶段，触发了p3的点击事件，弹出结果：2，然后触发了p1的点击事件，弹出结果：1
事件冒泡
当一个元素接受到事件的时候，会把它接收到的所有事件传播给它的父级，一直到顶层window，叫事件冒泡机制；
例子：
阻止冒泡：在当前要阻止冒泡的事件函数中调用event.cancelBubble=true;
对比没有取消冒泡事件时的效果，下面用了延时器一遍观察效果
事件冒泡的运用
下面是一个网站中常见的功能——分享到
更多编程相关知识，请访问：
编程视频
！！
事件捕获
事件捕获
事件冒泡
阻止冒泡
点击按钮div就出现，点击除按钮以外的部分div就消失
事件冒泡
分享到