什么是事件流？
事件流：描述的就是從頁面中接受事件的順序。分有事件冒泡與事件捕獲兩種。
什么是事件冒泡？
事件冒泡即事件開始時，由最具體的元素接收（也就是事件發(fā)生所在的節(jié)點），然后逐級傳播到較為不具體的節(jié)點。
什么是事件捕獲？
事件捕獲的概念，與事件冒泡正好相反。它認為當某個事件發(fā)生時，父元素應(yīng)該更早接收到事件，具體元素則最后接收到事件。
明白了上面的三個概念基本上就弄懂了DOM的事件流了，下面來徹底明白事件流。
DOM事件流的三個階段：
- 事件捕獲階段（為截獲事件提供了機會）
- 處于目標階段
- 事件冒泡階段（對事件作出響應(yīng)）
當一個DOM事件觸發(fā)時，它不是在觸發(fā)的對象上只觸發(fā)一次的，而是經(jīng)歷上述的三個階段，即開始從文檔的根節(jié)點流向目標對象，然后在目標對向上被觸發(fā)，之后再回溯到文檔的根節(jié)點。
來個實例：
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點擊事件先被父元素截獲了，且該函數(shù)只在事件捕獲階段起作用。
阻止事件冒泡：
stopPropagation()防止事件冒泡而帶來不必要的錯誤和困擾。
button.addEventListener('click', function(event) {
// event為事件對象
console.log('1. You click Button');
event.stopPropagation();
console.log('Stop Propagation!');
}, false);
輸出為4->1，事件在到達具體元素后，停止了冒泡。但不影響父元素的事件捕獲。
