实现一个函数
on('click','#div1','button',(e)=>{console.log("button was clicked")})
function on(eventType,element,selector,fn){
if(!(element instanceof Element)){
element = document.querySelector(element)
}
element.addEventListener(eventType,(e)=>{
const t=e.target
if(t.matches(selector)){
fn(e)
}
})
}
不过还是有点小问题，就是假如button里面有一个span，那么点击span是无法触发事件的，因为e.target为span，而selector为button，所以fn无法执行，解决方法就是 不要这么做 使用递归判断，有点麻烦。
事件委托的优缺点
优点是可以把事件监听放在祖先元素上
- 可以节约监听数量
- 可以监听动态生成的元素，当元素删除时也不用处理函数的解绑
缺点是事件委托是基于冒泡的
- 如果某些事件不支持冒泡，如onfoucs和onblur，那么也就不支持事件委托。
- 如果层级过多，冒泡过程中，可能会被某层阻止掉（建议就近委托）
