来了来了，这还看不懂？事件委托封装

事件委托（事件代理）

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

例子：取外卖

有三个同事会在今天下午点了外卖。为了拿外卖，有两种办法：

1. 是三个人在门口等外卖；

2. 是委托放前台。

现实开发例子：

多个li有相同的点击事件，一开始我们想的是使用for循环遍历所有的li，并且给他们添加上点击事件

后果：

1. 添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因
2. 每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了

解决：

如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

好处：

如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能

事件委托封装

 function eveEnt(child, callback) {
      // console.log(child)
      return function (event) {
       //兼容window.event  ie浏览器
        let e = event || window.event
        let targetEle = e.target || e.srcElement
        // console.log(targetEle)
        for (let i = 0; i < child.length; i++) {
          if (child[i] == targetEle) {
            callback.bind(targetEle)()
          }
        }
      }
    }

document.querySelector("ul").onclick = eveEnt(document.querySelectorAll("ul li"),function (){
      console.log(this)
})