事件委托是一种在处理事件时，将事件处理程序绑定到一个共同的祖先元素上，而不是在每个子元素上都绑定独立的事件处理程序。这样可以减少事件处理程序的数量，提高性能，并使代码更容易维护。
实现事件委托的基本思想是利用事件冒泡机制，将事件处理交给祖先元素，然后通过事件对象的 target 属性判断事件发生在哪个子元素上。
以下是一个简单的例子，演示如何使用事件委托：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
cursor: pointer;
}
li:hover {
background-color: #eee;
}
</style>
</head>
<body>
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
// 获取父元素
var parentList = document.getElementById('parentList');
// 添加事件监听器到父元素
parentList.addEventListener('click', function(event) {
// 判断事件是否发生在 li 元素上
if (event.target.tagName === 'LI') {
// 执行相应的处理逻辑
console.log('Clicked on', event.target.textContent);
}
});
</script>
</body>
</html>
在上面的例子中，事件监听器被添加到 ul 元素上，而不是每个 li 元素上。当用户点击 ul 元素中的任何一个 li 元素时，事件会冒泡到 ul 元素，并触发事件处理程序。通过检查事件对象的 target 属性，可以确定事件发生在哪个子元素上，从而执行相应的处理逻辑。
使用事件委托的好处包括减少事件处理程序的数量、减小内存占用，特别是当有大量子元素时，以及简化代码结构。
