簡化事件處理程序背後的思考

事件用於響應用戶點擊、鍵盤聚焦鏈接以及更改表單文本等操作。剛開始學習JavaScript 時，我編寫了複雜的事件監聽器。最近，我學習瞭如何減少代碼量和監聽器數量。

讓我們從一個簡單的例子開始：幾個可拖動的方塊。我們想向用戶顯示他們拖動的彩色方塊。

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>拖動一個方塊</p>

直觀的做法

剛開始學習JavaScript 事件時，我為每個元素編寫了單獨的事件監聽器函數。這是一個常見的模式，因為它是最簡單的入門方法。我們希望每個元素都有特定的行為，因此可以使用每個元素的特定代碼。

 document.querySelector('#red').addEventListener('dragstart', evt => {
  document.querySelector('#dragged').textContent = 'Dragged red';
});

document.querySelector('#yellow').addEventListener('dragstart', evt => {
  document.querySelector('#dragged').textContent = 'Dragged yellow';
});

document.querySelector('#green').addEventListener('dragstart', evt => {
  document.querySelector('#dragged').textContent = 'Dragged green';
});

減少重複代碼

該示例中的事件監聽器非常相似：每個函數都顯示一些文本。此重複代碼可以折疊到一個輔助函數中。

 function preview(color) {
  document.querySelector('#dragged').textContent = `Dragged ${color}`;
}

document
  .querySelector('#red')
  .addEventListener('dragstart', evt => preview('red'));
document
  .querySelector('#yellow')
  .addEventListener('dragstart', evt => preview('yellow'));
document
  .querySelector('#green')
  .addEventListener('dragstart', evt => preview('green'));

這樣更簡潔，但仍然需要多個函數和事件監聽器。

利用Event 對象

Event 對像是簡化監聽器的關鍵。調用事件監聽器時，它還會將Event 對像作為第一個參數發送。此對象包含一些數據來描述發生的事件，例如事件發生的時間。為了簡化我們的代碼，我們可以使用evt.currentTarget屬性，其中currentTarget指的是附加事件監聽器的元素。在我們的示例中，它將是三個彩色方塊之一。

 const preview = evt => {
  const color = evt.currentTarget.id;
  document.querySelector('#dragged').textContent = `Dragged ${color}`;
};

document.querySelector('#red').addEventListener('dragstart', preview);
document.querySelector('#yellow').addEventListener('dragstart', preview);
document.querySelector('#green').addEventListener('dragstart', preview);

現在只有一個函數而不是四個函數了。我們可以將完全相同的函數作為事件監聽器重用，而evt.currentTarget.id將根據觸發事件的元素具有不同的值。

使用事件冒泡

最後一個更改是減少代碼中的行數。與其將事件監聽器附加到每個方塊，不如將單個事件監聽器附加到包含所有彩色方塊的元素。

事件在觸發時從事件起源的元素（其中一個方塊）開始。但是，它不會就此停止。瀏覽器會轉到該元素的每個父元素，並調用其上的任何事件監聽器。這將持續到文檔的根元素（HTML 中的標籤）。此過程稱為“冒泡”，因為事件像氣泡一樣上升到文檔樹中。將事件監聽器附加到section 元素將導致焦點事件從被拖動的彩色方塊冒泡到父元素。我們還可以利用evt.target屬性，該屬性包含觸發事件的元素（其中一個方塊），而不是附加事件監聽器的元素（ section元素）。

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector('#dragged').textContent = `Dragged ${color}`;
};

document.querySelector('section').addEventListener('dragstart', preview);

現在我們已經將許多事件監聽器減少到只有一個了！對於更複雜的代碼，效果會更好。通過利用Event 對象和冒泡，我們可以控制JavaScript 事件並簡化事件處理程序的代碼。

點擊事件呢？

evt.target與dragstart和change等事件非常有效，在這些事件中，只有少量元素可以接收焦點或更改輸入。

但是，我們通常希望監聽點擊事件，以便我們可以響應用戶點擊應用程序中的按鈕。點擊事件會針對文檔中的任何元素觸發，從大型div 到小型span。

讓我們將我們的可拖動彩色方塊改為可點擊的。

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>點擊一個方塊</p>

const preview = evt => {
  const color = evt.target.id;
  document.querySelector('#clicked').textContent = `Clicked ${color}`;
};

document.querySelector('section').addEventListener('click', preview);

在測試此代碼時，請注意，有時不會附加到“Clicked”，而不是點擊方塊時。它不起作用的原因是每個方塊都包含一個可以點擊的<span></span>元素，而不是可拖動的<div>元素。由於span 沒有設置ID，因此<code>evt.target.id屬性為空字符串。我們只關心代碼中的彩色方塊。如果我們在方塊內某處點擊，我們需要找到父方塊元素。我們可以使用element.closest()來查找最接近被點擊元素的父元素。

 const preview = evt => {
  const element = evt.target.closest('div[draggable]');
  if (element != null) {
    const color = element.id;
    document.querySelector('#clicked').textContent = `Clicked ${color}`;
  }
};

現在我們可以對點擊事件使用單個監聽器了！如果element.closest()返回null，則表示用戶在彩色方塊之外的某處點擊，我們應該忽略該事件。

更多示例

以下是一些其他示例，用於演示如何利用單個事件監聽器。

列表

一個常見的模式是擁有一個可以交互的項目列表，其中新的項目是使用JavaScript 動態插入的。如果我們為每個項目附加事件監聽器，那麼每次生成新元素時，代碼都必須處理事件監聽器。

<div id="buttons-container"></div>
<button id="add">添加新按鈕</button>

let buttonCounter = 0;
document.querySelector('#add').addEventListener('click', evt => {
  const newButton = document.createElement('button');
  newButton.textContent = buttonCounter;

  // 每次點擊“添加新按鈕”時創建一個新的事件監聽器newButton.addEventListener('click', evt => {

    // 點擊時，記錄被點擊按鈕的編號。
    document.querySelector('#clicked').textContent = `Clicked button #${newButton.textContent}`;
  });

  buttonCounter ;

  const container = document.querySelector('#buttons-container');
  container.appendChild(newButton);
});

通過利用冒泡，我們可以在容器上使用單個事件監聽器。如果我們在應用程序中創建許多元素，這會將監聽器的數量從n 減少到兩個。

 let buttonCounter = 0;
const container = document.querySelector('#buttons-container');
document.querySelector('#add').addEventListener('click', evt => {
  const newButton = document.createElement('button');
  newButton.dataset.number = buttonCounter;
  buttonCounter ;

  container.appendChild(newButton);
});
container.addEventListener('click', evt => {
  const clickedButton = evt.target.closest('button');
  if (clickedButton != null) {
    // 點擊時，記錄被點擊按鈕的編號。
    document.querySelector('#clicked').textContent = `Clicked button #${clickedButton.dataset.number}`;
  }
});

表單

也許有一個包含許多輸入的表單，我們想將所有用戶響應收集到單個對像中。

姓名：
郵箱：
密碼：

let responses = {
  name: '',
  email: '',
  password: ''
};

document
  .querySelector('input[name="name"]')
  .addEventListener('change', evt => {
    const inputElement = document.querySelector('input[name="name"]');
    responses.name = inputElement.value;
    document.querySelector('#preview').textContent = JSON.stringify(responses);
  });
document
  .querySelector('input[name="email"]')
  .addEventListener('change', evt => {
    const inputElement = document.querySelector('input[name="email"]');
    responses.email = inputElement.value;
    document.querySelector('#preview').textContent = JSON.stringify(responses);
  });
document
  .querySelector('input[name="password"]')
  .addEventListener('change', evt => {
    const inputElement = document.querySelector('input[name="password"]');
    responses.password = inputElement.value;
    document.querySelector('#preview').textContent = JSON.stringify(responses);
  });

讓我們改用父<form></form>元素上的單個監聽器。

 let responses = {
  name: '',
  email: '',
  password: ''
};

document.querySelector('form').addEventListener('change', evt => {
  responses[evt.target.name] = evt.target.value;
  document.querySelector('#preview').textContent = JSON.stringify(responses);
});

結論

現在我們知道如何利用事件冒泡和事件對象將復雜的事件處理程序混亂簡化為幾個……有時甚至減少到一個！希望本文能幫助您從新的角度思考事件處理程序。我知道在我早期的開發生涯中花費大量時間編寫重複的代碼來完成同樣的事情之後，這對我來說是一個啟示。