如何正确使用addEventListener实现元素重复鼠标悬停位移？

我有一个id为“reso”的HTML div元素，需求是每当鼠标悬停该元素时，将其从A点移动到B点。但执行下方JavaScript代码时，元素仅会移动一次。我尝试用for循环（i从0到10）包裹代码，循环内的日志均能打印，但事件监听器仍仅触发一次，求解决办法。

原代码 #

re2.addEventListener("mouseover", function(){
    const re21 = document.getElementById("reso");
    re21.style.position = "absolute";
    re21.style.top = "50%";
    re21.style.left = "50%";
    console.log("Exiting Listener- mouseOver");

    re3.addEventListener("mouseover", function(){
        const re22 = document.getElementById("reso");
        re22.style.position = "fixed";
        re22.style.top ="0px";
        re22.style.left="0px";
        console.log("Exiting Listener- mouseout");

      });

  });

问题原因 #

1. 事件绑定逻辑错误：你给re2绑定mouseover后，又在回调里给re3绑定新的mouseover，每次触发都会重复绑定，且监听对象不是目标元素reso，逻辑完全偏离需求。
2. 无状态切换逻辑：代码只做了单向的位置设置，没有记录当前元素处于哪个位置，无法实现“每次悬停切换”的效果。
3. for循环无效：循环包裹只会重复绑定相同事件，不仅解决不了问题，还会导致后续触发时的逻辑混乱。

解决方案 #

方案1：用JS变量记录位置状态 #

直接监听reso的mouseover事件，用变量记录当前位置，每次触发时切换样式：

// 仅获取一次目标元素，提升性能
const reso = document.getElementById("reso");
// 初始标记为处于A点（0,0）
let isAtPointA = true;

reso.addEventListener("mouseover", function() {
  if (isAtPointA) {
    // 切换到B点（50%，50%）
    reso.style.position = "absolute";
    reso.style.top = "50%";
    reso.style.left = "50%";
  } else {
    // 切回A点（0,0）
    reso.style.position = "fixed";
    reso.style.top = "0px";
    reso.style.left = "0px";
  }
  // 翻转状态标记
  isAtPointA = !isAtPointA;
  console.log("位置已切换");
});

方案2：用CSS类切换（推荐，样式与逻辑分离） #

把位置样式写在CSS类中，JS只负责切换类名，更易维护：

CSS代码

/* A点样式 */
.point-a {
  position: fixed;
  top: 0;
  left: 0;
}

/* B点样式，可选transform让元素中心对齐 */
.point-b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript代码

const reso = document.getElementById("reso");
// 初始添加A点类
reso.classList.add("point-a");

reso.addEventListener("mouseover", function() {
  // 一键切换两个类的状态
  reso.classList.toggle("point-a");
  reso.classList.toggle("point-b");
  console.log("位置已切换");
});

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