DOM事件委托

DOM事件委托

把一个元素的响应事件,比如click的函数委托到另一个元素：

一般，会把一个或一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件是外层元素,当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后再外层元素上执行函数

比如，一次考试后，很多童鞋想知道成绩，一个个的来问，班主任很烦，直接把成绩单给了班长，那每个童鞋的成绩结果就委托到了班长身上。班长就是外层元素。其他童鞋成绩就可以通过委托方知道

委托有什么好处？

1.减少内存消耗

一个div里面有100个按钮,不会有人真的给每个button绑定一个事件吧,在效率上消耗太多的性能了

2.动态绑定事件

动态添加的元素有时我们是无法获取到的,我们就可以绑定到它的父层元素上

自己封装的委托函数

on('click','#div1','button',()=>{
   console.log('button被点击了')
})
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)
      }
  })
}