有没有办法避免对不同的锚定标签(<a>)重复mouseover/mouseout功能，当鼠标悬停在上面时会产生相同的视觉效果？

<ul id="linkList">
  <li><a href="#link1">Link 1</a></li>
  <li><a href="#link2">Link 2</a></li>
  <li><a href="#link3">Link 3</a></li>
</ul>

document.getElementById("linkList").addEventListener("mouseover", function(event) {
  if(event.target.tagName === "A") {
    // 处理mouseover事件的逻辑
    event.target.style.color = "red";
  }
});

document.getElementById("linkList").addEventListener("mouseout", function(event) {
  if(event.target.tagName === "A") {
    // 处理mouseout事件的逻辑
    event.target.style.color = "black";
  }
});