在 JavaScript 中，事件委托（Event delegation）是一種處理動態元素的高效方法。事件委托是將事件監聽器添加到父元素上，而不是直接添加到目標元素上。當觸發子元素事件時，事件會冒泡至父元素，然后在父元素的事件監聽器中處理。
以下是使用事件委托處理動態元素的步驟：
以下是一個簡單的示例：
HTML 結構：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript 代碼：
// 獲取父元素
const list = document.getElementById('list');
// 為父元素添加事件監聽器
list.addEventListener('click', function(event) {
// 獲取觸發事件的子元素
const target = event.target;
// 檢查點擊的元素是否為 li 子元素
if (target.tagName === 'LI') {
console.log('Clicked on:', target.textContent);
}
});
在這個示例中，我們為包含三個列表項的無序列表添加了事件委托。當點擊任意一個列表項時，事件會冒泡至<ul>元素，然后在事件處理函數中通過檢查event.target的標簽名來確定是否點擊了列表項。這樣，即使后續動態添加新的列表項，事件處理依然有效。
