javascript - 如何停止指定事件？

我有一堆名为“ grid-show”的网格。我想设置鼠标悬停时的特定元素的样式（不使用CSS中的.hover属性），但是当鼠标悬停时，我希望它停止并恢复正常。在我的示例中，“ else if”确实做到了这一点。

  let divShow = document.querySelectorAll('.grid-show');

  for(i = 0; i < divShow.length; i++){
    divShow[i].addEventListener('mouseover', function(eve){

      if (eve.target) {
        eve.target.style.color = "orange"
      } else if(!eve.target){
        eve.target.style.color = " ";
      }

    })
  }

最佳答案

使用基于CSS的解决方案会更优雅，但是如果您仍然想以编程方式进行操作，则可以使用“ mouseout”事件来删除样式：

let divShow = document.querySelectorAll('.grid-show');

for(i = 0; i < divShow.length; i++){
  divShow[i].addEventListener('mouseover', function(event){
    event.target.style.color = "orange"
  })

  divShow[i].addEventListener('mouseout', function(event){
    event.target.style.color = "";
  })
}