之前在学jquery时，看到了事件冒泡。好多次面试的时候，面试官也考过事件冒泡。我原来一直以为，事件冒泡就是触发子元素的事件处理程序，子元素的事件处理程序完成后会继续执行其父元素的事件处理程序。完全没想到事件冒泡和事件捕获之间居然有关系！
“DOM2级事件”规定的事件流为3个阶段：事件捕获阶段–>“处于目标”阶段–>事件冒泡阶段，如下图所示：

记住理解了这张图，就可以很容易地理解事件捕获与事件冒泡之间的关系。
那么stopPropagation()方法的功能又是什么呢？实际上，这个方法的功能是取消事件的进一步捕获或冒泡。也就可以理解为，当调用这个方法之后，事件流中的事件捕获与事件冒泡全都被阻止了。
事件流的这种处理机制，让我们有两次可以在目标对象上操作事件的机会！
注：IE8-只有事件冒泡的流程。

参考资料：《javascript高级程序设计》（第三版）

如果小伙伴们想深入理解事件冒泡和事件捕获，可以参考知乎上的这篇文章：
FEX·饭记 - 解密W3C标准冒泡、捕获原理（分享自知乎网）