什么是事件？
事件是文档或浏览器窗口发生的一些特定的交互瞬间， 比如 点击 双击 滚动条滑动……
什么是事件流？
事件流指的是 从页面接收事件的顺序。
关于事件流，IE和Netscape提出了差不多相反的概念，IE提出的就是广为人知的事件冒泡流，而Netscape提出的则是事件捕获流。
事件冒泡流： 事件从目标元素（最底层元素）逐级冒泡到最外层元素（windows）
事件开始是由最具体的元素接收，然后逐级向上级传播到较为不具体的节点 addEventListener 方法的第三个参数设为 false 表示事件在冒泡阶段触发
注： 所有现代浏览器都支持事件冒泡
注： 使用频繁的事件委托 是利用了 事件冒泡 （结构 ul > li 点击 具体的 li 元素 li 元素会冒泡到 父元素 ul 上 ，同时也会 触发 ul 上的事件 实现了 ul 元素的 事件委托 ）
事件捕获流 : 事件从外层元素（windows）逐级捕获到目标元素（最底层元素）
事件从不太确定的节点接收，然后向下传播到最具体的节点，事件捕获的用意在于 在事件到达预期目标之前捕获它 addEventListener 方法的 第三个参数 设为 true ，表示事件在捕获阶段 触发
注 ： 由于老版本浏览器不支持事件捕获，建议大家更多的是用事件冒泡，在有特殊需要时再使用事件捕获。
DOM事件流
事件流应该包括三个阶段，事件捕获阶段 处于目标阶段 事件冒泡阶段
注 ： 当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序，且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序
最底层目标元素的事件调用顺序 和 冒泡，捕获的 书写 顺序有关
事件委托的一些 问题
事件代理同时绑定了li和span，当点击span的时候，li和span都会冒泡。
解决方法1,：
span的事件处理程序中 阻止 事件冒泡
// stopPropagation(); 阻止 事件冒泡
$(document).on('click', 'span', function(e){
alert('li span');
e.stopPropagation();
})
解决方法2 ：
li 的事件处理程序中检测 target 元素
// e.target.nodeName== “ SPAN”
$(document).on('click', 'li', function (e) {
if (e.target.nodeName == 'SPAN') {
e.stopPropagation();
return;
}
alert('li li');
});
点击一个列表时，输出对应的索引 事件代理
<script>
var ul=document.querySelector('ul');
var lis=ul.querySelectorAll('ul li');
ul.addEventListener('click', function (e) {
var target= e.target;
if(target.nodeName.toUpperCase()==='LI'){
alert([].indexOf.call(lis,target));
}
},false)
</script>