Javascript初學筆記15 DOM基本操作-事件操作(listener & handler)

我們接續上一篇的結尾,用以下的codepen繼續實作
https://codepen.io/yvkfgzhs/pen/WWLrxO
雖然已經加入了加減分的icon,但這兩個icon卻毫無功能~同樣的事情也出現在名字旁邊的讚,所以這次我們的目標便是讓這三個icon具有功能!

本次目標

  • 能利用加減分的icon控制score的內容
  • 點擊讚之後發生某些事情

首先我們認識一下JS控制事件的語法,其中一種是內嵌在HTML結構內的,另一種則是透過監聽器(listener)跟控制器(handler)的組合,本次只練習後者。
大致上需要先透過DOM操作選取到你想操作部分的父元素,以這次的例子來說就是整個tbody ,為了方便操作我將它新增了id = ‘hi’ 的屬性。
接著你需要設置整個事件的監聽器跟控制器,粗略的語法會像這個樣子

你所選取的父元素.addEventListener(觸發事件的關鍵行為,觸發後要幹什麼)

觸發事件的關鍵行為有許多,可以參考以下網址
https://developer.mozilla.org/zh-TW/docs/Web/Events
而觸發後要幹什麼需要寫成一個匿名函式
綜合以上兩者,最終的語法就會變成這樣(關鍵行為以點擊為例)

 你所選取的父元素.addEventListener('click',function(event){
//你想做的事情
})

目前應該比較清楚該幹什麼了,那接著就進入實作。
首先我們第一步要選取要操作表格的父層元素,以此例來說就是#hi

let data = document.querySelector("#hi")

接著我們必須設置對應的監聽器與控制器,並設置變數儲存待會兒要變更的元素節點
注意一下這邊會有一個陌生的詞 event.target,簡單說就是你每次觸發事件時,你指向的元素會是哪一個。對於像我這樣的初學者來說瞭解每次指向的位置非常重要,因為這樣我才知道要利用parent還是silbling之類的方法去選取我想修改的元素,所以在撰寫這類程式碼的時候 我會不斷的使用console.log(event.target) 並配合devtool去檢查指向的位置,確保我選對了元素!

ata.addEventListener('click', function (event) {
let number = event.target.parentElement.children[0]
let number_value = Number(number.innerText)

})

這邊做兩個變數的儲存是因為一般來說元素節點回傳的是字串,若在之後的判斷式令它+1的話,只會把8->81,很明顯不是我們要的結果。選取好元素後,接著就分別針對加號跟減號做判斷式。

if (event.target.classList.contains('fa-plus-circle')){
//若指向的元素的標籤名稱含有加號icon,則將number的值做+1
number.innerText = number_value + 1
} else if (event.target.classList.contains('fa-minus-circle') && number_value >= 1){
//若指向的元素的標籤名稱含有減號icon,且number的現值>1,則將number的值做-1
number.innerText = number_value - 1
}

我們之前有提過classList以及querySelectorAll都會回傳類似陣列的Nodelist,操作上語法並不相同,使用前記得去估狗一下而不是直接使用includes。

到目前為止加減的功能已經完成了,最後就是要針對"讚"去做一些變化,我在codepen的CSS內寫了一個upper的樣式,接著就要配合toggle(想變化的樣式)去做變更,之後再找時間做完整的toggle說明。這些都完成後,完整的程式碼就會變成這樣。

//事件操作
let data = document.querySelector("#hi")
data.addEventListener('click', function (event) {
let number = event.target.parentElement.children[0]
let number_value = Number(number.innerText)
if (event.target.classList.contains('fa-plus-circle')){
number.innerText = number_value + 1
} else if (event.target.classList.contains('fa-minus-circle') && number_value >= 1){
number.innerText = number_value - 1
} else if (event.target.classList.contains('fa-thumbs-up')){
event.target.parentElement.classList.toggle('upper')
}
})

codepen連結請點這

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s