JS网格方块着色功能实现：解决作用域限制下的鼠标悬停着色问题

方案1：在play函数内直接绑定事件（静态/预生成网格） #

如果你的网格方块是页面加载就存在的，或者在调用play函数前已经生成完毕，直接在play函数里获取所有网格元素，逐个绑定鼠标悬停事件就行：

function play() {
  // 点击Color按钮触发的逻辑
  const gridSquares = document.querySelectorAll('.grid-square'); // 替换成你的网格方块类名/选择器
  gridSquares.forEach(square => {
    square.addEventListener('mouseover', function() {
      this.style.backgroundColor = 'black';
    });
  });
}

要是网格是点击Color按钮后才动态生成的，记得把绑定事件的代码放在生成网格之后：

function play() {
  // 先动态创建网格
  const gridContainer = document.getElementById('grid-container');
  // 示例：生成10x10的网格
  for (let i = 0; i < 100; i++) {
    const square = document.createElement('div');
    square.classList.add('grid-square');
    gridContainer.appendChild(square);
  }
  // 网格生成后再绑定事件
  const gridSquares = document.querySelectorAll('.grid-square');
  gridSquares.forEach(square => {
    square.addEventListener('mouseover', () => {
      square.style.backgroundColor = 'black';
    });
  });
}

方案2：事件委托（适配动态增减的网格） #

如果你的网格方块会随时新增或删除，用事件委托更高效——把事件绑定到网格的父容器上，利用事件冒泡来处理，不用每次更新网格都重新绑定事件：

function play() {
  const gridContainer = document.getElementById('grid-container');
  // 给父容器绑定鼠标悬停事件
  gridContainer.addEventListener('mouseover', (e) => {
    // 判断触发事件的是不是网格方块
    if (e.target.matches('.grid-square')) {
      e.target.style.backgroundColor = 'black';
    }
  });
}

这种方式不管后续加多少网格方块，悬停染色的逻辑都会自动生效。

关于之前的作用域问题 #

你之前遇到的问题，大概率是这几种情况：

• gridSquare变量在play函数外部定义，内部访问不到；
• 只获取了单个网格元素，没遍历所有方块；
• 在网格方块还没生成的时候就绑定了事件，导致获取不到元素。
  按照上面的方法，确保绑定事件时能正确拿到目标元素，就能解决这个问题。

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