JavaScript 事件委托(Event delegation)是一種高效處理事件的方式,其原理主要是基于事件冒泡(Event bubbling)。事件冒泡是指當在 DOM 元素上觸發某個事件(如點擊、輸入等)時,該事件會從觸發元素開始,逐級向上冒泡至根節點。
事件委托的基本原理是利用事件冒泡機制,將事件監聽器添加到父元素上,而不是為每個子元素單獨添加事件監聽器。當事件觸發時,事件會沿著 DOM 結構向上冒泡,直到遇到指定的父元素。通過在父元素的事件監聽器中判斷事件的目標元素(event.target),可以確定實際觸發事件的子元素,從而實現對子元素的集中處理。
這種方式的優點主要有以下幾點:
要實現事件委托,通常需要使用 JavaScript 的事件對象(event.target)來獲取觸發事件的子元素,并根據實際需求進行相應的處理。以下是一個簡單的示例:
// 為父元素添加事件監聽器
document.getElementById('parentElement').addEventListener('click', function(event) {
// 獲取觸發事件的子元素
const targetElement = event.target;
// 判斷是否為需要的子元素類型(如按鈕)
if (targetElement.tagName === 'BUTTON') {
console.log('Button clicked:', targetElement);
}
});
在這個示例中,我們將事件監聽器添加到了父元素(parentElement)上,并在事件處理函數中通過判斷 event.target 的標簽名來決定是否執行相應的操作。這樣,無論父元素中有多少子元素,都只需要一個事件監聽器來實現對它們的集中處理。