JavaScript 是由事件驅動的程式語言，瀏覽器讀取完 JavaScript 事件相關的程式碼後，需要等到事件被觸發才會執行。生活中的例子像是當門鈴響了(事件被觸發) -> 去開門(做對應的事情)。
事件流程
指的就是網頁元素接收事件的順序。
而可以分成兩種機制：
事件冒泡指的是從啟動事件的元素節點開始，一層一層網上傳遞直到整個網頁的根節點，就是 document。
<html>
<head>
<title>title</title>
</head>
<body>
<div>click</div>
</body>
</html>
當點擊 click 元素，在事件冒泡的機制裡，事件的順序會是：
事件捕獲是指由下往上傳遞，與事件冒泡相反。
跟上面同一份 html 一樣，如果是在事件補獲的機制下，觸發的順序會是：
那如何知道當我們觸發事件的時候，是用事件冒泡還是事件捕獲呢？
其實這兩種都會執行！
我們可以用 addEventListener() 方法來綁定 click 事件來驗證事件的流程。
<div>
<div id="parent">
父元素
<div id="child">子元素</div>
</div>
</div>
var parent = document.getElementById('parent')
var child = document.getElementById('child')
//第三個參數 true / false 代表捕獲/冒泡機制
parent.addEventListener('click', function(){
console.log('Parent Capturing')
}, true)
parent.addEventListener('click', function(){
console.log('Parent Bubbling')
}, false)
child.addEventListener('click', function(){
console.log('child Capturing')
}, true)
child.addEventListener('click', function(){
console.log('child Bubbling')
}, false)
當點擊是子元素時，console.log 會印出觸發的順序為：
"Parent Capturing"
"Child Capturing"
"Child Bubbling"
"Parent Bubbling"
點父元素時，順序為：
"Parent Capturing"
"Parent Bubbling"
從上面的例子可以知道，點擊子元素時，父層的 Capturing 會先觸發，在到子層的 Capturing 或者是 Bubbling 事件，最後再回到父層 Bubbling 結束。
今天介紹 JavaScript 事件機制，希望大家對這些都有點收穫～ 我們明天見啦！
iThome鐵人賽
看影片追技術