事件委托是一種高效處理事件的方式,它允許將事件監聽器添加到父元素上,而不是為每個子元素單獨添加事件監聽器。當事件觸發時,事件會冒泡到父元素,然后在父元素的事件監聽器中處理。這種方式可以減少內存使用,并提高性能。
要使用addEventListener
實現事件委托,請遵循以下步驟:
click
事件)。event.target
)是否是你想要觸發事件的子元素。你可以通過檢查元素的類名、ID或其他屬性來判斷。下面是一個簡單的示例,演示了如何使用addEventListener
實現事件委托:
HTML:
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
JavaScript:
// 獲取父元素(列表)
const list = document.getElementById('list');
// 為父元素添加點擊事件監聽器
list.addEventListener('click', (event) => {
// 檢查目標元素是否具有類名 "item"
if (event.target.classList.contains('item')) {
// 在這里執行你想要的操作,例如更改目標元素的樣式
event.target.style.color = 'red';
}
});
在這個示例中,我們將點擊事件監聽器添加到了<ul>
元素上。當點擊列表中的任何一個<li>
元素時,都會觸發事件監聽器,并將目標元素的文本顏色更改為紅色。這樣,我們只需要為父元素添加一個事件監聽器,而不是為每個子元素單獨添加事件監聽器。