Dom事件委托

事件委托可以理解为就是我们把一个元素的响应事件（click、online...）对应的函数委托给另外一个元素，而这个元素一般是它的父级、祖父级元素上，或者就是最外部的元素上，当触发了响应事件时。会通过冒泡机制从而触发到我们在它的上级元素的绑定事件，在上级上去执行函数。

事件委托的好处

场景一

<div id = 'div1'>
<span>文字</span>
<button class="class1">1</button>
<button class="class2">2</button>

...
<button class="class97">97</button>
<button class="class98">98</button>
<button class="class99">99</button>
<button class="class100">100</button>
</div>

假如我们有100个按钮，我们并不知道用户会点击那一个按钮，所以我们给每个按钮都加上事件监听，但这样的不但累而且低效，所以我们只需要在div1上加上事件响应对应的函数，当用户点击的时候，通过冒泡的机制，会找到div1这个外级元素，并调用函数完成事件。

场景二

需要监听动态的事件

同理，我们还是给它的外层元素加上，通过冒泡事件来完成事件响应。

封装事件委托

<div id = 'div1'>
<button>文字</button>
</div>

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)
  }
})
}

DOM事件委托

Dom事件委托

事件委托的好处

封装事件委托