JavaScript中的事件委托是指將事件處理功能交給父元素來處理，而不是每個子元素都有自己的事件處理程序。這種方式可以極大地減少DOM操作，提高網頁性能。

舉個例子，在一個ul列表中，需要為每個li元素都綁定點擊事件，如下：

const lis = document.querySelectorAll('li');
lis.forEach(li => {
li.addEventListener('click', () => {
console.log('clicked');
});
});

這種方式看起來簡單明了，但是如果列表很長，這么多的addEventListener操作必然會影響網頁性能。那么，我們可以將事件綁定在ul元素上：

const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
if(e.target.tagName === 'LI'){
console.log('clicked');
}
});

這樣，點擊li元素的時候，事件會在它的父元素ul上被觸發，從而響應事件處理程序。這種方式不僅減少了事件處理程序的數量，而且也可以對動態添加的li元素進行相應。當有一個新li元素被添加時，無需再次綁定事件，它的點擊事件邏輯會被委托給父元素ul上的事件處理程序。

當然，上述代碼只是一個簡單示例。在實際使用時，還需注意以下幾點：

第一，委托的事件類型和選擇器必須匹配，否則事件處理程序不會被觸發。比如，如果ul中有多個子元素，只想給其中的按鈕元素綁定點擊事件，可以這樣處理：

const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
if(e.target.tagName === 'BUTTON'){
console.log('button clicked');
}
});

這里只對ul的子元素button元素綁定點擊事件。如果其他元素被點擊，事件處理程序不會被觸發。

第二，需要注意事件的冒泡原理。委托事件的元素必須要有父子級關系，否則事件處理程序不會被觸發。下面這個例子中，點擊按鈕之后，不會觸發事件處理程序：

const div = document.createElement('div');
div.innerHTML = "<button>Button</button>";
document.body.appendChild(div);
const button = document.querySelector('button');
div.addEventListener('click', (e) => {
if(e.target.tagName === 'BUTTON'){
console.log('button clicked');
}
});

這里即使點擊button元素，事件處理程序也不會被觸發，因為button元素和div元素沒有父子級關系。

第三，需要注意動態添加元素的情況。在委托事件的過程中，會存在動態添加子元素的情況。此時，事件處理程序可能無法捕獲到事件。比如下面這個例子：

const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
if(e.target.tagName === 'LI'){
console.log(e.target.textContent);
}
});
const button = document.querySelector('button');
button.addEventListener('click', () => {
const li = document.createElement('li');
li.textContent = 'New Item';
ul.appendChild(li);
});

在這段代碼中，有一個列表和一個按鈕。點擊按鈕會在列表中添加新的li元素。但是，如果在委托事件處理程序之后再添加新的li元素，事件處理程序可能無法捕獲到新li元素的點擊事件。此時，需要使用事件代理的另外一種方式——在添加新li元素的時候，手動將事件綁定到新li元素上。

總之，事件委托是一種強大的技術，可以將事件處理功能交給更高一級的父元素來處理。如果正確使用，可以大大提高網頁性能，減少DOM控制程序，從而更好地優化網站。