在 JavaScript 中，事件委托是一種降低事件處理器數量的技術，從而提高性能。事件委托是將事件監聽器添加到父元素上，而不是為每個子元素單獨添加事件監聽器。當觸發子元素事件時，事件會冒泡至父元素，然后在父元素的事件監聽器中處理。
以下是如何使用事件委托優化代碼的一些建議：
選擇合適的父元素：確保將事件監聽器添加到能夠包含所有子元素的父元素上。這樣可以避免不必要的冒泡和事件處理。
使用 addEventListener 方法：使用 addEventListener 方法可以添加事件監聽器，并支持事件捕獲和冒泡階段。
檢測事件目標：在事件處理函數中，通過 event.target 獲取觸發事件的子元素。這樣可以根據需要針對特定元素執行操作。
避免在循環中添加事件監聽器：如果在循環中為子元素添加事件監聽器，可能會導致性能問題。確保在循環外部添加事件監聽器。
清理不再需要的監聽器：如果動態添加了事件監聽器，確保在不再需要時將其移除，以避免內存泄漏。
下面是一個簡單的示例，說明如何使用事件委托為多個按鈕添加點擊事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
</head>
<body>
<div id="buttons-container">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
<script>
const buttonsContainer = document.getElementById('buttons-container');
buttonsContainer.addEventListener('click', (event) => {
// 獲取觸發事件的子元素
const targetButton = event.target;
// 檢查是否為按鈕元素
if (targetButton.tagName === 'BUTTON') {
console.log(`Button clicked: ${targetButton.textContent}`);
}
});
</script>
</body>
</html>
在這個示例中，我們將事件監聽器添加到包含三個按鈕的父元素（buttons-container）。當點擊其中一個按鈕時，事件會冒泡至父元素，然后在父元素的事件處理函數中處理。這樣，我們只需為父元素添加一個事件監聽器，而不是為每個按鈕單獨添加事件監聽器。
