JavaScript井字棋开发：鼠标悬停预览图片报Uncaught TypeError错误

一、报错原因分析 #

你遇到的Uncaught TypeError: Cannot set property 'src' of null错误，根源有两个：

1. 错误使用DOM元素获取方法
   在你的setNewImage函数里，box本身就是通过document.querySelectorAll("img")获取到的DOM元素，但你却用document.getElementById(box)去查找——这个方法接收的是字符串类型的ID，而不是DOM对象，所以返回null，自然无法设置src属性。你应该直接操作box这个DOM元素本身。

2. 事件重复绑定的隐患
   你在HTML里给每个<img>都添加了onmouseenter="setNewImage()"，这意味着每次鼠标进入任意一个方块时，都会执行setNewImage函数，而函数内部又会给所有方块重新绑定一次mouseenter事件。多次触发后，一个方块会绑定N个相同的事件，导致后续行为混乱。

二、修复基础版代码 #

先修正上述问题，调整你的JavaScript代码：

// jshint esversion: 6
const boxes = document.querySelectorAll("img");
let currentPlayer = "cross.png";

// 先一次性给所有方块绑定事件，不要放到onmouseenter触发的函数里
function initMouseEvents() {
  for (const box of boxes) {
    box.addEventListener("mouseenter", () => {
      // 直接操作box元素，不用再通过ID查找
      if (currentPlayer === "cross.png") {
        box.src = "cross1.png";
      } else {
        box.src = "zero1.png";
      }
    });
    // 记得加上mouseleave事件，还原空白图
    box.addEventListener("mouseleave", () => {
      box.src = "blank.jpg";
    });
  }
}

// 页面加载完成后初始化事件
window.addEventListener("DOMContentLoaded", initMouseEvents);

同时要修改HTML，移除每个<img>上的onmouseenter="setNewImage()"属性，避免重复触发绑定逻辑：

<!-- 修改前 -->
<img id="1" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>
<!-- 修改后 -->
<img id="1" src="blank.jpg" alt="starting image of Chichen Itza"/>

三、更优实现：事件委托 #

你提到想找比for循环绑定更优的方式，事件委托就是最佳方案——不需要给每个方块单独绑定事件，只需要给它们的父元素（比如<table>）绑定一次事件，利用事件冒泡机制来处理所有子元素的鼠标事件。这样代码更简洁，性能更好，尤其是后续如果动态添加方块的话也能自动生效。

优化后的JavaScript代码：

// jshint esversion: 6
let currentPlayer = "cross.png";

// 给table绑定事件，监听所有img的mouseenter/mouseleave
const gameTable = document.querySelector("table");
gameTable.addEventListener("mouseenter", (e) => {
  // 判断触发事件的元素是否是img方块
  if (e.target.tagName === "IMG") {
    if (currentPlayer === "cross.png") {
      e.target.src = "cross1.png";
    } else {
      e.target.src = "zero1.png";
    }
  }
});

gameTable.addEventListener("mouseleave", (e) => {
  if (e.target.tagName === "IMG") {
    e.target.src = "blank.jpg";
  }
});

这种方式不需要提前获取所有img元素，也不需要循环绑定，只需要一次绑定就能处理所有方块的鼠标事件，代码更简洁高效。

额外提示 #

1. 注意变量命名和全等判断：推荐用===替代==，避免隐式类型转换带来的问题。
2. 记得处理mouseleave事件，让鼠标移开后还原空白图，否则预览图会一直停留在方块上。

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