JavaScript 事件委托是一種高效處理多個元素上相同事件的技術
動態添加的元素：當需要為不斷添加到頁面上的元素添加事件監聽器時，事件委托非常有用。因為為每個新元素單獨添加事件監聽器會導致性能問題，而使用事件委托只需在父元素上添加一個事件監聽器即可。
大量相似元素的場合：如果頁面中有大量具有相同類型事件的元素（例如，所有按鈕都使用相同的點擊事件），則事件委托可以節省內存和處理器資源。
對DOM操作頻繁的應用程序：事件委托可以減少因頻繁操作DOM而引起的性能損耗。通過將事件監聽器添加到父元素，可以減少對子元素的直接訪問次數。
要在何處使用事件委托，請遵循以下步驟：
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>
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
<script>
// 獲取包含所有按鈕的父元素
const buttonsContainer = document.querySelector('.buttons-container');
// 為父元素添加點擊事件監聽器
buttonsContainer.addEventListener('click', function(event) {
// 檢查觸發事件的元素是否為按鈕
if (event.target.classList.contains('btn')) {
console.log('Button clicked:', event.target);
}
});
</script>
</body>
</html>
在這個示例中，我們將事件監聽器添加到了包含所有按鈕的父元素上，而不是為每個按鈕單獨添加監聽器。當點擊事件發生時，我們檢查 event.target 是否包含 ‘btn’ 類，如果是，則表示我們點擊了一個按鈕。這樣，我們可以避免為每個按鈕重復添加事件監聽器，從而提高性能。
