什么是事件委托? 事件委托的原理以及优缺点

事件委托又称为事件代理. 下面我将简述一下:

事件委托: 给父元素注册事件,委托给子元素来处理
事件委托的原理: 事件冒泡
事件委托注意点:
不能使用this: this指向父元素
需要使用e.target : 真正点击的子元素(事件触发源)
事件委托的应用 : 给动态新增元素注册事件

举个实例: 给表格中动态新增的tr注册删除点击事件(经典应用)

分析: 如何删除表格中动态新增的tr? 此时我们就要使用事件委托

   //事件委托: 给父元素tbody注册点击事件,委托子元素tr来处理
   //有动态新增 (同时新增的父元素tbody不能注册事件,所以用body注册点击事件)
    document.body.onclick = function (e) {
      /* 
      需明确
      e.target --> a标签(.delete)
      e.target.parentNode --> td  删除按钮的父亲是td
      e.target.parentNode.parentNode --> tr  td的父亲是tr
      */
      let tr = e.target.parentNode.parentNode
      let tbody = document.querySelector('tbody')
      //判断点击的是否是删除按钮
      //取反,如果不是,则不执行
      if (!e.target.classList.contains('delete')) return
      //如果是的话,删除该tr
      tbody.removeChild(tr)
      /* 
      后续的上移和下移则与删除异曲同工,需要提醒的是:
      (1)同级之间: 查上级元素: 元素.previousElementSibling
               查下级元素: 元素.nextElementSibling
      (2)增加到元素前面:父元素.insertBefore(元素,哪个元素前面)
      */  

总结一下事件委托的优点:
1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。