JavaScript 委托事件
JavaScript 中，委托事件就是將某個元素的事件響應交給它的父元素或祖先元素來處理。這樣做的好處是可以避免給每個子元素都綁定一個事件處理函數，從而減小了內存占用。
下面我們來看一個例子，假設我們有一個父元素 div，里面有若干個子元素 span，我們想要在每個 span 上單擊時，改變它們的背景色為黃色。
//HTML代碼
<div id="parent">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
//JavaScript代碼
let parent = document.querySelector('#parent');
parent.addEventListener('click', (event) =>{
let target = event.target;
if (target.tagName === 'SPAN') {
target.style.backgroundColor = 'yellow';
}
});上面的代碼實現了我們的需求，但是當 div 里面的子元素數量很多時，每個子元素都綁定一個事件處理函數將會占用大量內存。這時候，我們就可以使用委托事件的方式來解決。
//JavaScript代碼
let parent = document.querySelector('#parent');
parent.addEventListener('click', (event) =>{
let target = event.target;
if (target.tagName === 'SPAN') {
target.style.backgroundColor = 'yellow';
}
});在上面的代碼中，我們將事件綁定在父元素 div 上，每次單擊子元素 span 時，事件都會冒泡到父元素，父元素就會執行事件處理函數來改變子元素的背景色。這樣做的好處是無論子元素的數量有多少，都只需要綁定一次事件處理函數。
事件委托的原理
事件委托的原理可以用以下兩句話來描述：
- 事件冒泡：當一個元素上發生了某個事件（比如單擊事件），這個事件會從這個元素開始一級一級地向上冒泡，直到傳播到 document 對象。如果在這個冒泡過程中，找到了一個綁定了相應事件類型的處理函數，就會執行它。
- 事件捕獲：與事件冒泡相反，事件從 document 對象開始，沿著 DOM 樹向下傳播，直到到達發生事件的元素。如果在這個過程中，找到了一個綁定了相應事件類型的處理函數，就會執行它。
由于事件冒泡機制，我們可以在父元素上綁定事件，然后利用事件傳遞到子元素的特性，來實現事件委托。
事件委托的優缺點
事件委托的優點是：
- 代碼簡潔：只需要綁定一次事件處理函數，就可以處理所有子元素的事件。
- 性能優化：減少內存占用，提高整體性能。
- 動態綁定：新添加的子元素也可以繼承父元素的事件處理函數。
事件委托的缺點是：
- 事件目標最好只包含少數元素，否則會有性能問題。
- 事件處理函數將在父元素或祖先元素上觸發，這可能會導致意想不到的結果。
總的來說，事件委托是一種非常實用的技術，可以使網頁的性能得到很大的提升。但是需要注意事件目標和事件處理函數的關系，以避免出現意外情況。