理解 JavaScrip 的 Event-driven
一直以來沒有好好的把 Event 觀念搞懂，踩了不少坑，像是不懂事件傳遞(Propogation)，沒辦法好好地除錯，卡住幾個小時。本篇就寫一些基本觀念，用自己的話語做一個輸出，好讓觀念在腦中建立。
事件(Event)能幹嘛
不能幹(誤)，好啦，正經的說，其實一直都有在使用，只是用的不知不覺，初期的時候還可以矇眼過關，寫小遊戲、小應用、較為小型的網頁，都沒什麼問題，後來才踩一堆坑，而且還遭遇到除錯困難，寫程式的時候思考被侷限，讓我感覺必須要來梳理清楚這些問題。
js 作為一個 Event-driven 的單執行緒腳本語言，監聽 Event 的死活（就事件開始與結束的意思）就可以操控一切，使用者在網頁上做的所有事情，都能得到該有的回應，例如說互動動畫、 form 的送出的等等。
基本觀念：事件屬性與方法、傳遞、監聽
屬性：target 、type 、cancelable
Event 指使用者在 DOM 元素上面的操作，例如：點擊、雙擊、敲擊鍵盤，其中包含了屬性 target 、type 、cancelable，方法有 preventDefault ()、stopPropogation()。
Event.target 指的是發生事件的 DOM 元素，它永遠指向那個出事的DOM，可以與 this 作為一組合體技來利用，但這又是另一個故事。
Event.type 顧名思義就是發生什麼事，例如DOM 元素被點擊了 ，他就有了 click 事件。
event.cancelable 可以從字面上來看，是在說這個事件能不能中途被取消，該屬性為布林值，也就是說 true 的時候他可以被取消，反之(false)，我們不能取消他。
方法：preventDefault ()、stopPropogation()
方法的部分，我們可以操控 DOM 元素的預設行為(也就是他本來就會做的事)，例如不可以拖曳的元素，我們讓他可以被拖曳。然後也可以停止事件傳播。
event.preventDefault() 是指當一個元素發生的事件沒有被明確的處理(handled)時，他應該要顯現元素遭遇事件預設的樣子。例如說<a>元素被點擊，預設會帶使用者到下一個頁面，當遇到不需要他帶使用者離開的情境，例如說：使用者送出表單，還要停留在該頁繼續做事，我們可以利用回傳 false (return false)來阻止這一切。
stopPropagation()可以阻止事件被傳遞，傳遞有兩種，分別是冒泡(bubbling)與捕獲(capturing)，冒泡是由內而外，捕獲是由外而內，詳見下段說明與示意圖。
事件傳遞：冒泡(bubbling)與捕獲(capturing)
我自己的記憶法是這樣，泡泡是從中間往上冒波波波的(?)出來，所以是從內而外，捕獲則是用手抓住的時候，手指折的方向就是由外往內啊，這樣就不會搞混。
綁定事件監聽器：addEventListener()
在 DOM 元素上面綁定事件的方法很多(族繁不及備載)，addEventListener()是目前最多人建議使用的，所以我務必得搞懂，他擁有三個參數，第一個要監聽 DOM 元素發生哪個事件，例如：點擊、雙擊（至於鍵盤的事件，我想要晚點再來研究）。
第二個參數是事件發生的當下我要幹嘛，裡面放的是一個函示(function)寫著我想做的事。
第三個個參數是可以不寫的，選擇要冒泡(bubbling)還是捕獲(capturing)，不寫的話預設是 true 為冒泡(bubbling)。
結語
事件基本觀念雖然並不複雜，實作的時候卻會踩一堆坑，最後附上幫助非常大的參考資料。
如果文章內容有錯誤，可以大方指正，本人非常需要，且會十分感謝您。
