事件委托是什么？
事件委托就是利用冒泡机制，将事件添加在目标元素的父元素或祖辈元素上，触发执行效果。也就是就是监听目标元素的祖先。
代码示例：
<body>
<div id="div">
<button id="btn">点击</button>
</div>
<script>
window.onload = function () {
let btn = document.querySelector("#btn")
let div = document.querySelector("#div")
//在btn的父元素div上添加监听函数
div.addEventListener("click", function (e) {
console.log("btn被点击了")
})
}
</script>
</body>
运行结果：点击btn触发了其父元素div的事件。
事件委托.png
事件委托的优点
1. 节约内存空间，提高JS性能
例：在 ul 上创建 100 个 li标签，点击每个 <li>都要弹框显示该 <li>的 value。
传统写法：在每个
<li>上都绑定click事件，并触发alert事件。（需要监听100个<li>的事件，占据大量内存）。事件委托：在
<ul>上绑定click事件，当触发onclick事件后，判断是不是<li>标签，如果是，则alert<li>标签的值。（只需要监听1个<ul>的事件，大大节约了内存空间）。
2. 可以动态添加 DOM 元素，不需要因为元素的变动而修改事件绑定。
例：监听一个目前不存在的DOM元素（以后可能存在）。
解：可以监听该DOM元素的祖先（事件委托），点击时再判断是不是我要监听的元素即可。
事件委托注意事项
事件委托绑定的元素，最好是被监听元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因为事件冒泡的过程也要耗时，越接近顶层，事件的「事件传播链」就越长，也就越耗时。
