事件用于響應(yīng)用戶點(diǎn)擊、鍵盤聚焦鏈接以及更改表單文本等操作。剛開始學(xué)習(xí) JavaScript 時(shí)，我編寫了復(fù)雜的事件監(jiān)聽器。最近，我學(xué)習(xí)了如何減少代碼量和監(jiān)聽器數(shù)量。

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

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

直觀的做法

剛開始學(xué)習(xí) JavaScript 事件時(shí)，我為每個(gè)元素編寫了單獨(dú)的事件監(jiān)聽器函數(shù)。這是一個(gè)常見的模式，因?yàn)樗亲詈唵蔚娜腴T方法。我們希望每個(gè)元素都有特定的行為，因此可以使用每個(gè)元素的特定代碼。

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';
});

減少重復(fù)代碼

該示例中的事件監(jiān)聽器非常相似：每個(gè)函數(shù)都顯示一些文本。此重復(fù)代碼可以折疊到一個(gè)輔助函數(shù)中。

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'));

這樣更簡潔，但仍然需要多個(gè)函數(shù)和事件監(jiān)聽器。

利用 Event 對象

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

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);

現(xiàn)在只有一個(gè)函數(shù)而不是四個(gè)函數(shù)了。我們可以將完全相同的函數(shù)作為事件監(jiān)聽器重用，而 evt.currentTarget.id 將根據(jù)觸發(fā)事件的元素具有不同的值。

使用事件冒泡

最后一個(gè)更改是減少代碼中的行數(shù)。與其將事件監(jiān)聽器附加到每個(gè)方塊，不如將單個(gè)事件監(jiān)聽器附加到包含所有彩色方塊的元素。

事件在觸發(fā)時(shí)從事件起源的元素（其中一個(gè)方塊）開始。但是，它不會就此停止。瀏覽器會轉(zhuǎn)到該元素的每個(gè)父元素，并調(diào)用其上的任何事件監(jiān)聽器。這將持續(xù)到文檔的根元素（HTML 中的 標(biāo)簽）。此過程稱為“冒泡”，因?yàn)槭录駳馀菀粯由仙轿臋n樹中。將事件監(jiān)聽器附加到 section 元素將導(dǎo)致焦點(diǎn)事件從被拖動的彩色方塊冒泡到父元素。我們還可以利用 evt.target 屬性，該屬性包含觸發(fā)事件的元素（其中一個(gè)方塊），而不是附加事件監(jiān)聽器的元素（section 元素）。

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

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

現(xiàn)在我們已經(jīng)將許多事件監(jiān)聽器減少到只有一個(gè)了！對于更復(fù)雜的代碼，效果會更好。通過利用 Event 對象和冒泡，我們可以控制 JavaScript 事件并簡化事件處理程序的代碼。

點(diǎn)擊事件呢？

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

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

讓我們將我們的可拖動彩色方塊改為可點(diǎn)擊的。

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>點(diǎn)擊一個(gè)方塊</p>

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

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

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

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

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

更多示例

以下是一些其他示例，用于演示如何利用單個(gè)事件監(jiān)聽器。

列表

一個(gè)常見的模式是擁有一個(gè)可以交互的項(xiàng)目列表，其中新的項(xiàng)目是使用 JavaScript 動態(tài)插入的。如果我們?yōu)槊總€(gè)項(xiàng)目附加事件監(jiān)聽器，那么每次生成新元素時(shí)，代碼都必須處理事件監(jiān)聽器。

<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;

  // 每次點(diǎn)擊“添加新按鈕”時(shí)創(chuàng)建一個(gè)新的事件監(jiān)聽器
  newButton.addEventListener('click', evt => {

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

  buttonCounter  ;

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

通過利用冒泡，我們可以在容器上使用單個(gè)事件監(jiān)聽器。如果我們在應(yīng)用程序中創(chuàng)建許多元素，這會將監(jiān)聽器的數(shù)量從 n 減少到兩個(gè)。

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) {
    // 點(diǎn)擊時(shí)，記錄被點(diǎn)擊按鈕的編號。
    document.querySelector('#clicked').textContent = `Clicked button #${clickedButton.dataset.number}`;
  }
});

表單

也許有一個(gè)包含許多輸入的表單，我們想將所有用戶響應(yīng)收集到單個(gè)對象中。

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> 元素上的單個(gè)監(jiān)聽器。

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);
});

結(jié)論

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