【Day 24】JavaScript 事件處理

2021 iThome 鐵人賽

DAY 24

自我挑戰組

轉職軟體工程師的543系列第 24 篇

13th鐵人賽

bonnieli1414

2021-09-24 01:14:41

951 瀏覽

分享至

說明:事件是您在編程時系統內發生的動作或者發生的事情，系統響應事件後，如果需要，您可以某種方式對事件做出回應。例如：如果用戶在網頁上單擊一個按鈕，您可能想通過顯示一個信息框來響應這個動作。

再舉幾個可能發生的不同事件：

用戶在某個元素上點擊鼠標或懸停游標。
用戶在鍵盤中按下某個按鍵。
用戶調整瀏覽器的大小或者關閉瀏覽器窗口。
一個網頁停止加載。
提交表單。
播放、暫停、關閉影片。
發生錯誤。

事件處理程序有以下幾種:

a.在HTML檔案中的元素屬性定義，也就是MDN內提及的行內事件處理器 - 不建議使用

原因:

1.混用HTML 和JavaScript，這樣文檔很難解析，也不便後期維護。
2.即使在單一文件中，內置事件處理器也不是一個好主意。例如 : 一個按鈕看起來還好，但是如果有一百個按鈕呢？您得在文件中加上100個屬性。這很快就會成為開發人員的噩夢。
行內事件處理器寫法，例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('Hello JS')">click me</button>
    <button onclick="showAlert()">click me</button>
    <script src="all.js"></script> 
</body>
</html>

JS代碼編寫如下:

function showAlert(){
  alert("hi JS function!");
}

點擊按鈕 → 觸發事件 → 捕獲事件 → 處理事件(處理click事件)

b.通過DOM屬性，在javascript代碼內定義

優點 : 程式更為精簡，對於後期也較好維護。
缺點 : 一個元素只能有一個事件處理程序，若一個元素有兩個以上事件處理程序，則會被後者覆蓋。
HTML代碼編寫如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="clickMe">click me</button>
    <script src="all.js"></script>
</body>
</html>

JS代碼編寫如下:

function clickAlert() {
    alert('hello JS');
  }
function secondClickAlert() {
    alert('hello second JS');
  }  
let btn = document.getElementById('clickMe');
btn.onclick = clickAlert;
btn.onclick = secondClickAlert; //會把上面的clickAlert覆蓋

c.監聽器(DOM Level 2 Events)

透過addEventListener() 和removeEventListener()定義

可以讓一個元素處理多個事件處理程序，以及可以在程式運行時刪除事件處理程序

addEventListener()

裡面放兩個參數，第1個參數是告訴addEventListener要監聽甚麼事件，第2個參數是執行處理事件的函式

removeEventListener()

裡面放兩個參數，第1個參數是告訴addEventListener要刪除哪一事件，第2個參數則是哪一處理事件的函式要刪除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="clickMe">click me</button>
    <script src="all.js"></script>
</body>
</html>

JS代碼編寫如下:

function clickAlert() {
  alert('hello JS');
  console.log(event);//可以顯示click事件所有的屬性，每個事件都有對應的event object方便程式利用這些屬性作進一步處理
  }
function secondClickAlert() {
  alert('hello second JS');
  }  
let btn = document.getElementById('clickMe');
btn.addEventListener('click', clickAlert);
btn.addEventListener('click', secondClickAlert);
btn.removeEventListener('click',secondClickAlert); //因為此行代碼導致secondClickAlert()被刪除