JavaScript事件委托是一種優化網頁性能的技術。當網頁中有大量相似的元素需要添加事件時，該技術可以避免重復添加事件處理程序，從而減少頁面中需要處理的事件數量。

例如，在以下HTML代碼中有五個button元素，我們需要將點擊事件添加到每個元素：

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<button id="btn5">Button 5</button>
<script>
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var btn3 = document.querySelector('#btn3');
var btn4 = document.querySelector('#btn4');
var btn5 = document.querySelector('#btn5');
btn1.addEventListener('click', function() {
console.log('Button 1 clicked');
}, false);
btn2.addEventListener('click', function() {
console.log('Button 2 clicked');
}, false);
btn3.addEventListener('click', function() {
console.log('Button 3 clicked');
}, false);
btn4.addEventListener('click', function() {
console.log('Button 4 clicked');
}, false);
btn5.addEventListener('click', function() {
console.log('Button 5 clicked');
}, false);
</script>

上述代碼存在問題，因為它重復了相同的事件處理程序，這使得代碼變得冗長。

事件委托提供了更好的解決方案。通過將事件處理程序添加到父級元素而不是子元素本身，我們可以使用一個事件處理程序來處理所有子元素的事件。 在這個例子中，我們可以將事件處理程序添加到父元素

<div id="buttons">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<button id="btn5">Button 5</button>
</div>
<script>
var buttons = document.querySelector('#buttons');
buttons.addEventListener('click', function(event) {
console.log(event.target.textContent + ' clicked');
}, false);
</script>

在這個例子中，我們將事件處理程序添加到 buttons 元素。當按鈕被點擊時，包裝事件對象的 event.target 屬性提供了對被單擊的元素的訪問。 通過訪問此元素的textContent屬性，我們可以獲取它的文本內容。

使用事件委托的好處在于可以更有效地處理事件，減少代碼重復并減少事件處理程序的數量。在某些情況下，它還可以提高性能。

除了click事件，我們也可以委托其他事件，比如focus、blur、submit、keydown等。

下面是一個使用JavaScript事件委托來處理提交表單的示例：

<form id="myForm">
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="submit" value="Submit">
</form>
<script>
var form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
var firstName = form.elements.firstName.value;
var lastName = form.elements.lastName.value;
var fullName = firstName + ' ' + lastName;
alert(fullName);
}, false);
</script>

在這個例子中，我們使用submit事件綁定事件處理程序。 通過訪問元素的 elements 屬性，我們可以訪問表單中的所有表單元素。 在事件處理程序中，我們從這些元素中檢索值并構建完整的名稱。 防止默認的表單提交行為，通過調用對事件對象的event.preventDefault()方法。 最后，我們通過使用alert 函數來顯示完整的名稱。

總之，JavaScript事件委托是一種優化網頁性能的技術。當網頁中有大量相似的元素需要添加事件時，該技術可以減少頁面中需要處理的事件數量，優化頁面性能。它通過將事件處理程序添加到父級元素而不是子元素本身，減少了代碼的復雜性和重復性。通過使用事件委托，我們可以更有效地處理事件，提高我們的開發效率和用戶體驗。