事件代理（Event Delegation）或事件委托（Event Delegation/Event Bubbling）是一种在 JavaScript 中用于处理 DOM（文档对象模型）事件的技术。这种方法的主要思想是，不是直接在目标元素上绑定事件监听器，而是在其父元素或祖先元素上绑定监听器，以处理目标元素的事件。
事件代理利用了事件冒泡（Event Bubbling）的特性，事件冒泡是指当一个元素的事件被触发时，该事件会从最特定的元素开始，然后逐级向上传播到较为不特定的元素。因此，我们可以将事件监听器绑定在 DOM 树中较高的层级上，而不是每个需要事件响应的元素上。
这样做的好处有很多，比如可以减少内存占用，提高性能，因为不需要为每个元素单独设置事件监听器。同时，当动态添加或删除子元素时，无需重复绑定或解绑事件监听器。
下面是一个简单的代码示例，展示了如何使用事件代理来处理点击事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件代理示例</title> </head> <body> <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <script> // 获取 ul 元素 const myList = document.getElementById('myList'); // 在 ul 上绑定 click 事件监听器 myList.addEventListener('click', function(event) { // 检查被点击的元素是否为 li 元素 if (event.target.tagName.toLowerCase() === 'li') { // 在控制台输出被点击的 li 元素的内容 console.log('Clicked:', event.target.textContent); } }); </script> </body> </html>
在这个示例中，我们没有直接在每个 li 元素上绑定点击事件监听器，而是在包含它们的 ul 元素上绑定了一个监听器。当点击 li 元素时，由于事件冒泡，click 事件会从 li 元素冒泡到 ul 元素，从而触发绑定在 ul 上的监听器。在监听器的回调函数中，我们通过 event.target 属性获取到被点击的元素，并检查它是否为 li 元素。如果是，则输出其内容。
