事件委托的坑

在进行事件委托中，'click'事件正常运行，但'mouseover'不能正常运行

 ul.addEventListener('click', function (e) {
      lis.forEach(Element => Element.className = '')
      box.forEach(Element => Element.style.display = 'none')
      e.target.className = 'color'
      //获取index
      let arr = [...lis]
      let index = arr.indexOf(e.target)   //判断首次出现的位置并返回
      box[index].style.display = 'block'
     })

这是因为e.target的原因。

  事件委托：把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。
1.因此事件委托必须冒泡，则mouseover可以使用，mouseenter不能使用
2.'click'事件在点击时触发，因此e.target==点击的元素；'mouseover'事件，在父盒ul就已经触发，因此e.target==(ul->li->li.children),e.target不是固定值所以会引发错乱。

//e.target:被鼠标移入的元素 ul->li->span。 必须给e.target设置相等条件

ul.addEventListener('mouseover', function (e) { //mouseover  冒泡
      lis.forEach(element => element.className = '');   
      if (e.target.nodeName == 'LI') {   //e.target.nodeName  大写字母
        e.target.className = 'color'
      } else if (e.target.nodeName == 'SPAN') {
        e.target.parentNode.className = 'color'    //parentNode
      }
    })