事件委托(Event delegation)是一種在父元素上處理子元素事件的技術。它通過監聽父元素的事件,然后判斷觸發事件的子元素,進行相應的處理。這樣做的好處是可以減少事件監聽器的數量,提高性能。
以下是使用JavaScript實現事件委托的步驟:
event.target
)。下面是一個簡單的示例:
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', (event) => {
// 獲取觸發事件的元素
const target = event.target;
// 判斷觸發事件的元素是否為li子元素
if (target.tagName === 'LI') {
// 執行相應的處理邏輯
console.log(`Clicked on ${target.textContent}`);
}
});
在這個示例中,我們為ul
元素添加了一個點擊事件監聽器。當點擊事件發生時,我們檢查觸發事件的元素是否為li
子元素,如果是,則輸出相應的文本。這樣,我們只需要一個事件監聽器就可以處理所有的li
子元素的點擊事件。