iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

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

【Day 24】JavaScript 事件處理

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

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

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

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

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()被刪除

上一篇
【Day 23】JavaScript 條件(三元)運算子
下一篇
【Day 25】JavaScript ajax
系列文
轉職軟體工程師的54330

尚未有邦友留言

立即登入留言