如何利用this优化按钮hover事件的if条件判断？代码优化求助

我希望为按钮的hover事件设置条件，使每个按钮执行各自的专属任务。目前的if语句未达到预期效果：原本只想让第一个按钮hover时触发对应打印操作，但现在所有按钮hover时都会输出mouseover事件信息。后续我会为其他按钮编写对应的条件任务。

原本为每个按钮单独编写了事件监听器，现在希望简化代码，于是使用了如下脚本，同时想了解能否利用this来优化if条件判断，恳请提供逻辑优化的建议。

<button id="firstButton" class="play"></button>
<button id="secButton" class="play"></button>
<button id="thirdButton" class="play"></button>
<button id="fourthButton" class="play"></button>
<button id="fifthButton" class="play"></button>
<button id="sixthButton" class="play"></button>
<button id="seventhButton" class="play"></button>
<span id="span">Change Me</span>

var items = document.getElementsByClassName('play');
var span = document.getElementById('span');

function clearSpan() {
  span.innerHTML = "";
}

// consolidation attempt for hover on
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseover', printHoverOn);
}

// consolidation attempt for hover off
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseout', printHoverOff);
}

function printHoverOn(e) {
  cursor = this.id;
  if (cursor === 'firstButton') {
    span.innerHTML = "January";
    console.log(this.id + " is hovered");
  } else if (cursor === 'secButton') {
    span.innerHTML = "February";
    console.log(this.id + " is hovered");
  } else {
    console.log("nothing to print");
  }

}

function printHoverOff(e) {
  console.log(this.id + " was hovered");
  clearSpan();
  cursor = null;
}

优化方案 #

1. 修复所有按钮输出日志的问题 #

当前代码的else分支会执行console.log("nothing to print")，导致非目标按钮hover时也有日志输出。如果只想让有专属任务的按钮输出日志，直接移除else分支即可：

function printHoverOn(e) {
  const buttonId = this.id;
  if (buttonId === 'firstButton') {
    span.innerHTML = "January";
    console.log(buttonId + " is hovered");
  } else if (buttonId === 'secButton') {
    span.innerHTML = "February";
    console.log(buttonId + " is hovered");
  }
}

2. 用映射表替代if-else，提升扩展性 #

随着按钮数量增加，嵌套的if-else会变得臃肿难维护。可以创建一个按钮ID与对应任务的映射对象，通过this.id直接匹配执行，代码更简洁：

// 定义按钮ID与hover行为的映射，新增按钮直接在这里扩展
const buttonActions = {
  firstButton: () => {
    span.innerHTML = "January";
    console.log("firstButton is hovered");
  },
  secButton: () => {
    span.innerHTML = "February";
    console.log("secButton is hovered");
  },
  thirdButton: () => {
    span.innerHTML = "March";
    console.log("thirdButton is hovered");
  }
};

function printHoverOn(e) {
  const action = buttonActions[this.id];
  // 存在对应任务则执行
  if (action) action();
}

3. 简化事件监听器绑定 #

合并两次循环，一次完成mouseover和mouseout事件的绑定，减少冗余代码：

// 用let替代var，避免循环变量作用域问题（养成ES6变量声明习惯）
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseover', printHoverOn);
  items[i].addEventListener('mouseout', printHoverOff);
}

4. 修复全局变量隐患 #

原代码中cursor未声明会成为全局变量，建议在函数内部用const/let声明为局部变量：

function printHoverOn(e) {
  const cursor = this.id;
  // 后续逻辑...
}

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