什么是事件流？
事件流：描述的就是从页面中接受事件的顺序。分有事件冒泡与事件捕获两种。
什么是事件冒泡？
事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。
什么是事件捕获？
事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。
明白了上面的三个概念基本上就弄懂了DOM的事件流了，下面来彻底明白事件流。
DOM事件流的三个阶段：
- 事件捕获阶段（为截获事件提供了机会）
- 处于目标阶段
- 事件冒泡阶段（对事件作出响应）
当一个DOM事件触发时，它不是在触发的对象上只触发一次的，而是经历上述的三个阶段，即开始从文档的根节点流向目标对象，然后在目标对向上被触发，之后再回溯到文档的根节点。
来个实例：
var button = document.getElementById('clickMe');
button.onclick = function() {
console.log('1. You click Button');
};
document.body.onclick = function() {
console.log('2. You click body');
};
document.onclick = function() {
console.log('3. You click document');
};
window.onclick = function() {
console.log('4. You click window');
};
把window点击事件更改为使用事件捕获模式
window.addEventListener('click', function() {
console.log('4. You click window');
}, true);//true代表使用事件捕获模式，alse则表示使用事件冒泡模式
输出为4->1->2->3点击事件先被父元素截获了，且该函数只在事件捕获阶段起作用。
阻止事件冒泡：
stopPropagation()防止事件冒泡而带来不必要的错误和困扰。
button.addEventListener('click', function(event) {
// event为事件对象
console.log('1. You click Button');
event.stopPropagation();
console.log('Stop Propagation!');
}, false);
输出为4->1，事件在到达具体元素后，停止了冒泡。但不影响父元素的事件捕获。
