DOM事件委托

什么是事件委托？

事件委托就是利用冒泡机制，将事件添加在目标元素的父元素或祖辈元素上，触发执行效果。也就是就是监听目标元素的祖先。

• 场景一
  要给100个按钮添加点击事件，怎么办？
  答：监听这100各按钮的祖先，等冒泡的时候判断 target 是不是这100个按钮中的一个。

div1.addEventListener('click',(e)=>{
  const t = e.target
  if(t.tagName.toLowerCase()==='button'){
    console.log('button 被点击了')
}
})//toLowerCase小写

• 场景二
  要监听目前不存在的元素的点击事件，怎么办？
  答：监听祖辈元素，等点击的时候看看是不是我想要监听的元素即可。

setTimeout(()=>{
  const button = document.createElement('button')
  button.textContent='click 1'
  div1.appendChild(button)
},1000)
//  button在1s后出现
div1.addEventListener('click',(e)=>{
  const t = e.target
  if(t.tagName.toLowerCase()==='button'){
    console.log('button被click')
  }
})

• 事件委托的优点
  节省内存
  可以监听动态元素