JS筆記系列：事件監聽addEventListener
Dec 10, 2020
今天要介紹的是事件監聽 addEventListener
看網路上的前輩們說事件Event相當於是JS應用的心臟，加上addEventListener這個功能有著比其他綁定事件方法更大的優勢，這也幾乎說明了為什麼要好好了解這個綁定方法了
為什麼需要監聽事件？
當我們在操作網頁時，有時會去點擊網頁上的按鈕查看我們所需要的資料；又或是滑動頁面到下方去看其他的網頁內容等，以上的行為都是我們在和該網頁產生互動事件的範疇內。
在和網頁的互動過程中，網頁如何知道我們點擊的是哪個按鈕？又如何知道該顯示給我們的是什麼樣的資料畫面呢？
這時候就需要事件監聽addEventListener來幫我們看看是哪一個事件被使用者觸發了？之後也才能寫出觸發之後與之對應的函式功能等
事件監聽addEventListener 的寫法
- 參數一：事件名稱
在網頁上有許多事件類型(點擊click,滑鼠經過mouseover等）可以依照設計的需求去綁定特定的事件。 - 參數二：事件處理器
這邊通常會是函式，也就是當第一個參數所綁定的事件被觸發時所要執行的函式內容有什麼 - 參數三：布林值Boolean
決定這個事件流程的機制會是哪一種？
事件冒泡 Event Bubbling 的話，會設定為false
事件捕獲 Event Capture 的話，則會設定為true
若沒有設定的話，預設的值會是false事件冒泡的機制
別緊張，來個範例馬上就看懂了
由上面的範例1.當中我們可以看出來，當要綁定一個事件的監聽時我們必須先選定好一個指定的DOM節點。
如此我們才能夠在該節點被觸發時（在這個範例中是被點擊“click”的這個事件）執行事件監聽裡面的函式內容（在這個範例中是印出“HelloWorld”的這個行為）。
而使用事件監聽 addEventListener 有一個別與以往事件綁定方法的優勢，那就是它能夠同時在相同節點的相同事件上綁定2個以上的函式 function （如下圖範例2.）
在範例2.當中，我們可以發現我們針對 btn 這個節點的變數上做了兩次的事件綁定，而在網頁的執行結果上也是如期跑出了兩個 alert （如下圖）
以上就是關於事件監聽 addEventListener 的基礎介紹，其實關於事件監聽還有很多可以介紹的重要資訊（像是關於addEventListener的第三個參數等）
有機會再來幫大家做額外的篇幅介紹它們吧
那就一樣下次見囉ʘ‿ʘ
