[第八週]DOM — 瀏覽器事件處理

學習目標：了解如何透過 JavaScript 如何監聽事件並作出反應

本文主要源自以下資料的學習整理：

• [第七週] DOM — 操作 DOM 介面、事件監聽
• [FE102] 前端必備：JavaScript

用瀏覽器來操作 JavaScript，對於前端來說比較會去關注為以下三種面相：

• 介面：如何改變介面
• 事件：如何監聽事件並作出反應
• 資料交換：如何跟伺服器交換資料

此篇將會談到「如何監聽事件並作出反應」的部分

事件

事件是 JavaScript 在網頁應用中最重要的部分，藉由使用者觸發不同事件執行不同的功能。
例如：當「滑動」頁面時做動畫、當「點擊」彈跳視窗等。

監聽事件 addEventListener()

• 監測 DOM 中的某一元素，當使用者觸發某事件時去執行後續的動作。
• element.addEventListener('type', function, useCapture)

參數值說明

1. type

• 指定事件類型，例如：click 、 keydown、keypress
• 必須
• 常使用到的事件（詳見 MDN）
  1. 滑鼠相關：click、mousedown、mouseenter、mouseleave
  2. 鍵盤相關： keydown、keypress、keyup
  3. 瀏覽器相關：scroll、resize

2. function

• 必須
• 指定事件觸發時執行的函數

在 function 的部分可以使用直接將函式作為參數或匿名函式（anonymous）兩種做法，以下用最常見的 click 做舉例：

1. 直接將函式作為參數

const element = document.querySelector('#block2')
element.addEventListener('click', onClick());
function onClick(){     //call back function
   alert('click!')
}

2. 匿名函式（anonymous）

const element = document.querySelector('#block2')
element.addEventListener('click', function(){
   // ... 當按鈕點擊時、要做的動作
});

3. useCapture

• 可選
• 布林值，指定事件在捕獲或冒泡階段執行
  1. true 補獲
  2. false 冒泡（默認值）
• 詳細可參考：[第八週]DOM —瀏覽器事件傳遞機制

回呼函式 Callback function

將 函式 先寫入記憶體，藉由將 function 帶入參數（argument）通往另一個函式的函式。它會在外部函式內調用 函式 或完成某些事情。

如何使用 Callback function

其實就是將 function 當作參數傳入

function greet(name){
   alert(`hi ${name}`)
}
function getName(callback){
   var name = prompt('你的名字')
   callback(name)
}
getName(greet); //function 當作參數傳入

事件資訊 event(e)

一個事件的發生會包含著各式各樣的資訊，例如：click 事件就會包含點擊的區塊、位置….等，瀏覽器這些資訊整理好讓我們應用在函式中。event 資訊會放在 callback function 裡面的第一個參數，通常都是取名 event 或簡寫 e

const element = document.querySelector('#block2')
element.addEventListener('click', function(e){
   console.log(e)
})

常見的事件資訊

click 事件：點擊 DOM 時觸發

• e.target 點擊到的元素
• e.screenX 滑鼠離視窗左邊的距離
• e.screenY 滑鼠離視窗右邊的距離

keydown 事件：按下鍵盤時觸發

• e.key 案件號碼

submit 事件：提交表單前觸發，可用來驗證表單內容

const form = document.querySelector('#register')
form.addEventListener('submit',function(e){
   const password = document.querySelector('input[name=password]')
   const passwordConfirm =   document.querySelector('input[name=passwordConfirm]')
   if(password.value !== passwordConfirm.value){
      e.preventDefault()
      alert('兩次輸入的密碼不同')
   }
})

e.preventDefault 阻止預設行為

阻止瀏覽器上的特殊元素的預設行為，以下為常見的使用方式：

1. form 中 submit 事件 — 阻止送出表單
2. a 中 click 事件 — 阻止跳轉網址
3. form 中 keypress 事件 — 阻止輸入按鍵

重點整理

1. addEventListener() 用來監聽事件，並在事件觸發時執行函式。
2. 回呼函式 Callback function 是將函式先寫入記憶體中，藉由參數傳入另一個函式，得到 response 後在執行回呼函式。
3. 我們可以利用事件資訊應用在函式中。
4. e.preventDefault 可以阻止事件的預設行為。

以上有錯誤的地方歡迎指正，感謝。