Event 介面表示了一個在 DOM 物件上所發生的事件。
可以是由使用者的操作行為所產生（如：點擊滑鼠按鈕或敲打鍵盤）
或是來自 API 因處理非同步任務所產生。

註冊監聽事件 (addEventListener)

<input type="button" class="btn" value="點">

const btn = document.querySelector(".btn");

btn.addEventListener("click", function (e) {
    console.log('你被點擊了');
})

告訴你當下元素資訊 (event 的 e)

當監聽的事件發生時，瀏覽器會去執行我們透過 addEventListener() 註冊的 Event Handler (EventListener) ，也就是我們所指定的 function。

這個時候，EventListener 會去建立一個「事件物件」 (Event Object)，裡面包含了所有與這個事件有關的屬性，並且以「參數」的形式傳給我們的 Event Handler：

const btn = document.querySelector(".btn");
btn.addEventListener("click", function (e) {
    console.log(e);
})

像是

• type : 表示事件的名稱
• target : 表示觸發事件的元素
• bubbles : 表示這事件是否是在「冒泡」階段觸發 (true / false)
• pageX / pageY : 表示事件觸發時，滑鼠座標在網頁的相對位置

EVENT II