JavaScript鼠标悬停事件处理：鼠标悬停链接时修改其他链接透明度的方案及事件委托适用性咨询

首先，咱们先拆解下你当前的实现方式，再对比事件委托的优劣：

当前方法的问题 #

你现在给每个.nav__link单独绑定mouseover事件，这种做法在小数量元素（比如你现在的3个链接）时能勉强运行，但存在几个明显的缺陷：

1. 性能冗余：每个链接都绑定独立事件，当链接数量增多时，会增加浏览器的内存开销——毕竟多了N个独立的事件监听。
2. 逻辑bug：你当前的代码只处理了鼠标悬停时设置其他链接的透明度，但完全没考虑鼠标移开后的状态重置。也就是说，当你从一个链接移开后，其他链接会一直保持0.2的透明度，除非你再悬停另一个链接，而且之前的异常状态也不会被修正。
3. 扩展性差：如果之后通过JS动态添加新的.nav__item，新的链接不会自动绑定事件，你得重新执行一次绑定逻辑。

更优的选择：事件委托 #

事件委托（给父元素.nav__links绑定事件）是更合理的方案，核心优势如下：

• 性能更优：只需要在父元素上绑定1个事件，不管子元素有多少，都能统一处理。
• 支持动态元素：后续新增的.nav__link不需要额外绑定事件，父元素的事件监听会自动覆盖它们。
• 逻辑更易维护：可以统一处理鼠标悬停和离开的逻辑，避免状态混乱。

事件委托的实现代码 #

我们可以给父元素绑定mouseover和mouseout事件，统一管控所有链接的状态：

const navLinks = document.querySelector(".nav__links");

// 鼠标悬停时处理透明度变化
navLinks.addEventListener('mouseover', function(e) {
  // 确保事件目标是.nav__link元素
  if (e.target.classList.contains('nav__link')) {
    const allLinks = navLinks.querySelectorAll('.nav__link');
    allLinks.forEach(link => {
      if (link !== e.target) {
        link.style.opacity = 0.2;
      }
    });
  }
});

// 鼠标离开时恢复所有链接的透明度
navLinks.addEventListener('mouseout', function(e) {
  if (e.target.classList.contains('nav__link')) {
    const allLinks = navLinks.querySelectorAll('.nav__link');
    allLinks.forEach(link => {
      link.style.opacity = 1;
    });
  }
});

若坚持用单个元素绑定事件（修复版） #

如果你想保留给每个链接绑定事件的方式，至少要修复状态重置的问题，同时补充mouseout事件：

const links = Array.from(document.querySelectorAll(".nav__link"));

links.forEach(link => {
  // 悬停时设置其他链接透明度
  link.addEventListener('mouseover', function(e) {
    links.forEach(otherLink => {
      if (otherLink !== e.target) {
        otherLink.style.opacity = 0.2;
      }
    });
  });

  // 离开时恢复所有链接的初始状态
  link.addEventListener('mouseout', function() {
    links.forEach(otherLink => {
      otherLink.style.opacity = 1;
    });
  });
});

额外推荐：纯CSS实现方案 #

其实这个需求完全可以不用JS，用纯CSS就能实现，代码更简洁、性能更好：

/* 父元素hover时，所有子链接统一降低透明度 */
.nav__links:hover .nav__link {
  opacity: 0.2;
}

/* 单独给当前hover的链接恢复透明度 */
.nav__links:hover .nav__link:hover {
  opacity: 1;
}

总结 #

• 如果你的导航链接数量固定且极少，修复后的单个绑定方法也能用，但事件委托是更专业、更具扩展性的方案。
• 纯CSS方案是最优解，无需JS介入就能实现需求，推荐优先考虑。

内容的提问来源于stack exchange，提问作者mike98