概念
通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。
事件流
DOM2级事件规定的事件流包括三个阶段：
- 事件捕获
- 目标阶段
- 事件冒泡
为什么要用事件委托
场景：要给100个按钮添加相同的点击事件，改怎么办？
循环遍历添加？ 这么做的话会创建100个事件处理函数，每个函数就是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就差了。
如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
监听目前不存在的元素的点击事件，又该咋办？
可监听其父辈元素，等点击时判断是不是想要监听的元素即可。
优点：省内存，可监听动态元素
原理
事件委托就是利用事件冒泡机制实现的，委托它们父级代为执行事件。
事件委托的实现
事例
<div id="div1">
<button>click1</button>
<button>click2</button>
<button>click3</button>
<button>click4</button>
<button>click5</button>
</div>
事件委托的方式：
div1.addEventListener('click',(e)=>{
const t = e.target
if(t.tagName.toLowerCase() === 'button'){
console.log('button被点击了')
}
})
封装事件委托
function on(enentType,element,selector,fn){
if(!(element instanceof Element){
element = document.querySelector(element)
}
element.addEventListener(enentType,(e)=>{
const t = e.target
if(t.matches(selector)){
fn(e)
}
})
}
on('click','#div1','button',()=>{
console.log('button 被点击了')
})
