事件委托

// 事件委托、事件委派、事件代理 -  利用冒泡

      // 给元素祖先绑定事件，将来子元素触发事件 会冒泡到祖先元素，

      //1 提高代码执行效率 2 对动态生成的子元素也生效

const ul = document.querySelector('ul')
      // ul.addEventListener('click', function (e) {
      //   console.log('ul')
      //   console.log(e.target) //  真正触发的元素
      //   e.target.style.backgroundColor = 'red'
      // })

直接操作儿子缺点 无法获取后面动态生成的元素

const li = document.querySelector('li')
      // li.addEventListener('click', function l(e) {
      //   console.log('li')
      //   console.log(e.target) //  真正触发的元素
      //   e.target.style.backgroundColor = 'red'