JavaScript 事件委托（Event delegation）是一種高效處理多個元素上事件的方式。它通過將事件監聽器添加到父元素，而不是每個子元素上，從而減少內存消耗并提高性能。事件委托適用于以下場景：
動態生成的元素：當頁面上的元素是動態生成或添加的，使用事件委托可以確保新添加的元素自動綁定事件監聽器，而無需重新為每個新元素單獨添加事件監聽器。
大量元素的事件處理：如果一個頁面上有大量元素需要處理相同的事件，例如點擊按鈕，使用事件委托可以減少內存消耗，提高性能。
頻繁觸發的事件：對于頻繁觸發的事件（如滾動、輸入、鼠標移動等），事件委托可以減少事件監聽器的數量，從而提高性能。
簡化代碼：事件委托可以將多個子元素的事件處理邏輯集中在一個地方，使代碼更簡潔、易于維護。
下面是一個簡單的示例，展示了如何使用事件委托為動態生成的列表項添加點擊事件：
<!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>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
list.addEventListener('click', (event) => {
const target = event.target;
if (target.tagName === 'LI') {
console.log(`Clicked on ${target.textContent}`);
}
});
</script>
</body>
</html>
在這個示例中，我們將點擊事件監聽器添加到<ul>元素上，而不是每個<li>元素上。當點擊事件發生時，我們檢查事件目標（event.target）是否為<li>元素，如果是，則執行相應的操作。這樣，無論我們何時向列表中添加新的<li>元素，它們都會自動擁有點擊事件處理功能。
