JavaScript之HTML DOM Event
當滑鼠在button上點選時，會在button上觸發一個click事件。但是button是div的一個子元素，
在button裡點選相當於在div裡點選，是否click事件也會觸發在div上？如果click事件也觸發在div上，
會不會共用同一個事件物件？如果click事件也觸發在div上，誰的事件會先發生？click事件還會在哪些元素上面觸發。。
到這裡，就需要理解事件（Event）一個很重要的機制：事件流（Event Flow）。
事件流動
DOM事件不單單隻會在一個Element上觸發，它還會流向其他Element。事件的流動通常會經歷這麼三個階段：
捕獲階段 -> 目標階段 -> 冒泡階段
事件流是一種新的事件分析工具。
它提供了一種方法：
從單個記錄和事件序列的視覺化和檢視資料
使用強大的圖形介面搜尋感興趣的時態模式
總結所有的事件序列、它們的時間和流行率，並發現其中的異常。
有兩種事件流：
1. 冒泡事件流：當事件在某一DOM元素被觸發時，例如使用者在客戶名位元組點上點選滑鼠，
事件將跟隨著該節點繼承自的各個父節點冒泡穿過整個的DOM節點層次，直到它遇到依附有該事件型別處理器的節點，
此時，該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡，
在遵從W3C標準的瀏覽器裡可以通過呼叫事件物件上的stopPropagation()方法，
在Internet Explorer裡可以通過設定事件物件的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過DOM冒泡直至到達文件根。
2.捕獲事件流：事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，
事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中，
事件會被從文件根到事件目標元素之間各個繼承派生的元素所捕獲，如果事件監聽器在被註冊時設定了useCapture屬性為true,
那麼它們可以被分派給這期間的任何元素以對事件做出處理；否則，
事件會被接著傳遞給派生元素路徑上的下一元素，直至目標元素。事件到達目標元素後，它會接著通過DOM節點再進行冒泡。
addEventListener() 方法
例項
在使用者點選按鈕時觸發監聽事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用於向指定元素新增事件控制代碼。
addEventListener() 方法新增的事件控制代碼不會覆蓋已存在的事件控制代碼。
你可以向一個元素新增多個事件控制代碼。
你可以向同個元素新增多個同類型的事件控制代碼，如：兩個 "click" 事件。
你可以向任何 DOM 物件新增事件監聽，不僅僅是 HTML 元素。如： window 物件。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以新增事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。
語法
element.addEventListener( event, function, useCapture);第一個引數是事件的型別 (如 "click" 或 "mousedown").
第二個引數是事件觸發後呼叫的函式。
第三個引數是個布林值用於描述事件是冒泡還是捕獲。該引數是可選的。
若一個元素（div）是目標元素（button）的祖先，那事件物件會在該元素上觸發兩次：
一次是捕獲階段，另一次是冒泡階段。當事件物件在事件目標元素（button）上觸發時，事件流動進入了目標階段。
部分內容摘自：
http://www.runoob.com/js/js-htmldom-eventlistener.html
https://www.jianshu.com/p/382895a4027d