在 JavaScript 中，事件委托（Event delegation）是一種降低事件處理器數量的技術。通過將事件監聽器添加到父元素上，而不是每個子元素上，可以利用事件冒泡機制捕獲子元素觸發的事件。當事件觸發時，可以通過檢查事件對象的 target 屬性來判斷實際觸發事件的元素，并執行相應的處理函數。
以下是一個簡單的示例，演示了如何在 JavaScript 中使用事件委托：
HTML 結構：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript 代碼：
// 獲取父元素引用
const list = document.getElementById('list');
// 定義事件處理函數
function handleClick(event) {
// 檢查觸發事件的元素是否是 li 子元素
if (event.target.tagName === 'LI') {
console.log(`Clicked on ${event.target.textContent}`);
}
}
// 為父元素添加事件監聽器
list.addEventListener('click', handleClick);
在這個示例中，我們將事件監聽器添加到了 id 為 list 的 ul 元素上。當點擊列表中的任意一個 li 子元素時，都會觸發 handleClick 函數。在函數內部，我們通過檢查 event.target 的標簽名來判斷實際觸發事件的元素，并輸出相應的文本。這樣，我們就實現了事件委托，降低了事件處理器的數量。
