从 addEventListener(,,true/false)

事件流：
w3c约定的事件触发分为三个阶段，捕获阶段、目标阶段、冒泡阶段；
捕获阶段时，先触发最上层父元素的捕获阶段绑定函数，即从外层到里层触发，直至到达目标元素，此时进入目标阶段，按照绑定顺序触发所有目标元素的绑定函数，结束后进入冒泡阶段，触发上一级父元素的冒泡阶段绑定函数，即从里层到外层触发。

EventTarget.addEventListener() ：
target.addEventListener(type, listener[, useCapture]);
第三个参数，useCapture，是可选的，默认为false，且只有在部分浏览器中支持，true表明该事件监听器绑定在捕获阶段（和目标阶段），false则表明绑定在冒泡阶段（和目标阶段）。

Event.stopPropagation()：
w3school的说明：
定义和用法
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
语法
event.stopPropagation()
说明
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

测试：
http://jsfiddle.net/wmu4ewxy/1/

---

参考资料：

1. api，EventTarget.addEventListener()，Internet Explorer 的 attachEvent 方法，传统事件绑定方法等 ：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
2. 事件类型一览表：https://developer.mozilla.org/zh-CN/docs/Web/Events
3. w3c DOM-Level-3-Events，事件流说明：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
4. document.addeventlistener与window.addeventlistener的区别：http://stackoverflow.com/questions/12045440/difference-between-document-addeventlistener-and-window-addeventlistener
5. js-addEventListener()第三个参数useCapture，测试用例：http://www.cnblogs.com/loveyouyou616/p/3916345.html
6. stopPropagation() 方法 ：http://www.w3school.com.cn/jsref/event_stoppropagation.asp