DOM事件流（event flow ）存在三个阶段：
1、事件捕获阶段
2、处于目标阶段
3、事件冒泡阶段
dom标准事件流的触发顺序为：先捕获再冒泡。
即当触发dom事件时，会先进行事件捕获，捕获到事件源之后，通过事件传播进行事件冒泡。
事件源：被触发dom事件的这个元素被叫作事件源。
事件捕获（event capturing）：
当鼠标点击或者触发dom事件时，从根节点 --->事件源（由外到内）进行事件传播。
事件冒泡（dubbed bubbling）：
事件源 --->根节点（由内到外）进行事件传播。
addEventListener（event，Fn, Boolean）:
addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而，addEventListener还可以传入第三个参数：
element.addEventListener(event, function, useCapture);
useCapture是false，默认值，表示在事件冒泡阶段调用事件处理函数;
useCapture是true，则表示在事件捕获阶段调用处理函数。
栗子：事件冒泡
执行结果：
如果点击子元素不想触发父元素的事件，可使用event.stopPropagation();
方法：
child.addEventListener("click",function(e){
console.log("click-child");
e.stopPropagation();
}
栗子：事件捕获
var parent =document.getElementById("parent");
var child =document.getElementById("child");
document.body.addEventListener("click",function(e){
console.log("click-body");
},false);
parent.addEventListener("click",function(e){
console.log("click-parent---事件传播");
},false);
//新增事件捕获事件代码
parent.addEventListener("click",function(e){
console.log("click-parent--事件捕获");
},true);
child.addEventListener("click",function(e){
console.log("click-child");
},false);
运行结果
事件委托（事件代理）
事件委托是事件冒泡与事件捕获的运用。一般来讲，会把一个或者一组元素的事件委托到它的外层元素（父层或者更外层元素）上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素（即被委托的元素）上时（事件捕获阶段），会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
Jquery的on事件，实现委托，一般用于动态生成的元素
document.getElementById('list').addEventListener('click', function (e) {
// 兼容性处理
var event = e || window.event;
var target = event.target ||event.srcElement;
if(target.matches('li.class-1')){
console.log('the content is: ',target.innerHTML);
}
});