JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。
事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。
<!DOCTYPE html>
<html>
<head>
<title>事件委托示例</title>
</head>
<body>
<ul id="list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ul>
<script>
// 获取父元素
var list = document.getElementById('list');
// 添加点击事件监听器到父元素
list.addEventListener('click', function(event) {
// 检查目标元素是否是列表项
if (event.target.tagName === 'LI') {
// 在控制台输出被点击的列表项的文本内容
console.log(event.target.textContent)
}
})
</script>
</body>
</html>
一、事件捕获
事件捕获（Event Capturing）是事件传播的一种阶段，它是事件冒泡的前置阶段。在事件捕获阶段，事件从最外层的祖先元素开始，逐级向下传播，直到达到目标元素。
二、事件冒泡
事件冒泡（Event Bubbling）是指在前端网页开发中，当一个元素上的事件被触发时，如果该元素上有注册该事件的处理程序，那么这个事件会沿着元素的层次结构向上冒泡，依次触发父元素的同一事件。
当某个元素上发生了一个事件，比如点击（click）事件，首先会执行该元素自身绑定的事件处理函数，然后这个事件会向上冒泡，触发父元素上绑定的相同事件处理函数。如果父元素也有父元素，那么事件会继续向上冒泡，依次触发更高层级的父元素上的事件处理函数，直到冒泡到文档的根元素（通常是 <html>元素）为止。
事件冒泡是浏览器默认的事件传播方式，但可以通过调用事件对象的 stopPropagation() 方法来停止事件的冒泡，阻止事件继续传播到上层元素。
三、为什么要使用事件委托
JavaScript中，页面内事件处理程序的个数会直接影响页面的整体性能，因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，页面的性能则越差。事件委托技术可以避免对每个子元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
四、事件委托实现原理
事件委托的实现原理是基于事件冒泡机制。当一个元素上发生了某个事件（如点击事件），事件会从触发元素开始向上冒泡，直到根节点。事件委托利用了事件冒泡的特性，将事件处理程序绑定在父元素上，通过事件冒泡捕获子元素的事件。
以下是事件委托的实现原理步骤：
1.给父元素绑定事件
2.给父元素定义事件，监听子元素的冒泡事件
3.找到是哪个子元素的事件，通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标