前言

前兩天介紹完新增跟修改節點，今天來聊聊DOM事件！

事件是什麼?

試想當我們在逛一個網站時，可能會需要註冊會員，點擊註冊時跳出視窗請你填寫資料，填寫完成送出並重新登入後，發現在導覽列上已經有顯示出你的會員名稱並和你道聲您好。

其實這段過程已經觸發了不少事件，在網頁中操作的大多數行為(像是滑鼠點擊、按下鍵盤、拉動進度條等等)，在JS中都可以使用事件來進行處理。

那個該如何使用事件呢?想想一名現實生活中的偵探會需要什麼呢?(絕對不是擁有死神體質)，需要擁有能持續監聽的能力！是的，在網頁中如此多大大小小的事件，我們需要運用監聽器來檢查是否有發生事件，假如發生指定事件便會針對該事件應該要執行的動作進行操作。

設定監聽器的方式如下：

const div = document.querySelector('div')

// 運用addEventListener來監聽div的點擊事件，當點擊到div時視窗便會挑出一則hello的訊息
div.addEventListener('click', () => {
	window.alert('hello')
})

監聽事件有非常多，比較常用的事件像是：

當我們在進行監聽事件時，監聽器會建立一個事件物件，這個物件中會包含所有與事件有關的屬性，我們可以運用參數的方式來針對事件物件進行抓取，進而了解關於事件可以運用什麼樣的屬性來進行規劃及撰寫：

div.addEventListener('click', (event) => {
	console.log(event.target)
	console.log(this)
})

• event.target event即是上面提及的事件物件，而target可以說是物件中最常使用的屬性，他可以幫助我們了解是哪個元素上發生了click事件(只要在div範圍內，你點擊哪裡他就會回傳點擊的元素給你)
• this 這邊又要提一下this，在監聽事件中的this代表這個監聽器固定綁定的對象，在上面的例子中即是div。

DOM事件的學習目前感受上覺得可能更需要透過實際操作才會慢慢有種好像有比較熟悉的感覺，如果想強化學習的話，也可以嘗試接觸JS30或是50days50project等網路資源來讓自己擁有更多實作練習的機會！