事件委托(Event delegation)是一種提高效率的 JavaScript 編程技巧,主要用于減少事件監(jiān)聽器的數(shù)量,從而優(yōu)化性能。這種方法的核心思想是利用事件冒泡機(jī)制,將事件監(jiān)聽器添加到父元素上,而不是為每個子元素單獨添加事件監(jiān)聽器。當(dāng)事件觸發(fā)時,會一直沿著 DOM 結(jié)構(gòu)向上冒泡,直到找到一個匹配的事件監(jiān)聽器為止。
事件委托的優(yōu)點:
事件委托的基本原理:
target
屬性判斷觸發(fā)事件的元素是否是我們關(guān)心的元素(即需要執(zhí)行特定操作的元素)。下面是一個簡單的示例:
HTML 結(jié)構(gòu):
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript 代碼:
// 為父元素(ul)添加事件監(jiān)聽器
document.getElementById('list').addEventListener('click', function(event) {
// 獲取觸發(fā)事件的元素(li)
const target = event.target;
// 判斷觸發(fā)事件的元素是否是我們關(guān)心的元素(li)
if (target.tagName === 'LI') {
console.log('Clicked on:', target.textContent);
}
});
在這個示例中,我們將點擊事件監(jiān)聽器添加到了父元素(ul)上,而不是為每個子元素(li)單獨添加事件監(jiān)聽器。當(dāng)點擊某個子元素時,事件會沿著 DOM 結(jié)構(gòu)向上冒泡,觸發(fā)父元素上的事件處理函數(shù)。在事件處理函數(shù)中,我們通過判斷觸發(fā)事件的元素(target)是否是我們關(guān)心的元素(li),來決定是否執(zhí)行相應(yīng)的操作。