[學習筆記] 邊學邊寫 JavaScript 30天 (18)：JS網頁事件處理

2022 iThome 鐵人賽

DAY 18

Modern Web

[學習筆記] 邊學邊寫 JavaScript 30天系列第 18 篇

14th鐵人賽

LeeFang

團隊好想工作室 v6.0

2022-10-03 18:44:38

467 瀏覽

分享至

今天內容

callback function
表單事件處理 onSubmit
事件傳遞機制：捕獲與冒泡

筆記

callback function：類似去餐廳點餐後，店家會給一個呼叫器(會嗶嗶叫的那個)，等餐點做好才會呼叫你過去取餐(可以先做其他的事)，這段期間不用一直在櫃檯前面等候(不能做其他的事)。

<div id="aaa">
  aaa
  <p>this is a </p>
  <a class="bbb">I'm a link</a>
  <input/>
</div>
const event = element.addEventListener("click")  
// 無法預期使用者什麼時候會觸發事件，這樣寫會讓程式一直卡在這個地方，沒辦法去做其他事情。

const aaa = document.querySelector("#aaa")
aaa.addEventListener("click",onClick)
//監聽click事件(滑鼠點擊)，發生時，瀏覽器幫你觸發onClick這個function(稱為callback function)。
function onClick() {
  alert("click!")   
}

// 常見寫法會直接在後面寫一個匿名函式
aaa.addEventListener("click",function() {
  alert("click!")   
})

aaa.addEventListener("click",function(e) {
  console.log(e.target)  
  //使用target可以拿到點擊的區塊
})

const inputBox = document.querySelector("input")
inputBox.addEventListener("keydown",function(e) {
  console.log(e.key)   
  //監聽keydown事件(按某按鍵)，使用key可以拿到按的值
})

將點擊事件與昨天的筆記做結合～做一個點擊可以切換背景顏色的按鈕。

//css
<style>
  .active {
    background-color: orangered;
  }
</style>

//html
<button class="change_btn">背景開關</button>

//script
const change_btn = document.querySelector(".change_btn")
change_btn.addEventListener("click", function(e){
  document.querySelector("body").classList.toggle("active")
})

表單事件處理 onSubmit

//html
<form class="login_form">
  <div>
    username:<input name="username"/>
  </div>
  <div>
    password:<input name="password1" type="password"/>
  </div>
  <div>
    password again: <input name="password2" type="password"/>
  </div>
  <input type="submit">
</form>

//scrpit
const login = document.querySelector(".login_form")
login.addEventListener("submit",function(e) {
  const input1 = document.querySelector("input[name=password1]")
  const input2 = document.querySelector("input[name=password2]")
  if (input1.value !== input2.value) {
    alert("密碼不同")
    e.preventDefault()
  }
})

事件傳遞機制：捕獲與冒泡。
```
<body>
  <div>
    <a href="https://ithelp.ithome.com.tw/">link</a>
  </div>
</body>
```
看結構比較好理解，html的結構是一層一層的，所以當點擊到<a>時(也等同點擊到包住a的div)，在傳遞過程會先由上往下(捕獲)傳到a後，再往上(冒泡)傳遞出去。如圖示：

由此傳遞方式可以 ~~開大絕~~ 讓body底下全部失去預設行為可以這樣寫
addEventListener第三個參數可用，輸入boolean值：false冒泡，true捕獲。
```
const body = document.querySelector("body")
body.addEventListener("click",function(e) {
  e.preventDefault()   
  //body下的<a>就失去連結這項行為了
},false)

body.addEventListener("click",function(e) {
  e.stopPropagation()  
  //阻止事件傳遞
},true)
```