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

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

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>拖動(dòng)一個(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';
});

減少重複代碼

該示例中的事件監(jiān)聽器非常相似：每個(gè)函數(shù)都顯示一些文本。此重複代碼可以折疊到一個(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 對(duì)象

Event 對(duì)像是簡化監(jiān)聽器的關(guān)鍵。調(diào)用事件監(jiān)聽器時(shí)，它還會(huì)將Event 對(duì)像作為第一個(gè)參數(shù)發(fā)送。此對(duì)象包含一些數(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è)方塊）開始。但是，它不會(huì)就此停止。瀏覽器會(huì)轉(zhuǎn)到該元素的每個(gè)父元素，並調(diào)用其上的任何事件監(jiān)聽器。這將持續(xù)到文檔的根元素（HTML 中的標(biāo)籤）。此過程稱為“冒泡”，因?yàn)槭录駳馀菀粯由仙轿臋n樹中。將事件監(jiān)聽器附加到section 元素將導(dǎo)致焦點(diǎn)事件從被拖動(dòng)的彩色方塊冒泡到父元素。我們還可以利用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è)了！對(duì)於更複雜的代碼，效果會(huì)更好。通過利用Event 對(duì)象和冒泡，我們可以控制JavaScript 事件並簡化事件處理程序的代碼。

點(diǎn)擊事件呢？

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

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

讓我們將我們的可拖動(dòng)彩色方塊改為可點(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);

在測(cè)試此代碼時(shí)，請(qǐng)注意，有時(shí)不會(huì)附加到“Clicked”，而不是點(diǎn)擊方塊時(shí)。它不起作用的原因是每個(gè)方塊都包含一個(gè)可以點(diǎn)擊的<span></span>元素，而不是可拖動(dòng)的<div>元素。由於span 沒有設(shè)置ID，因此<code>evt.target.id屬性為空字符串。我們只關(guān)心代碼中的彩色方塊。如果我們?cè)诜綁K內(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)在我們可以對(duì)點(diǎn)擊事件使用單個(gè)監(jiān)聽器了！如果element.closest()返回null，則表示用戶在彩色方塊之外的某處點(diǎn)擊，我們應(yīng)該忽略該事件。

更多示例

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

列表

一個(gè)常見的模式是擁有一個(gè)可以交互的項(xiàng)目列表，其中新的項(xiàng)目是使用JavaScript 動(dòng)態(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)擊按鈕的編號(hào)。
    document.querySelector('#clicked').textContent = `Clicked button #${newButton.textContent}`;
  });

  buttonCounter ;

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

通過利用冒泡，我們可以在容器上使用單個(gè)事件監(jiān)聽器。如果我們?cè)趹?yīng)用程序中創(chuàng)建許多元素，這會(huì)將監(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)擊按鈕的編號(hào)。
    document.querySelector('#clicked').textContent = `Clicked button #${clickedButton.dataset.number}`;
  }
});

表單

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

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