Javascript 如何在尚未创建的鼠标悬停事件上访问和着色div

let container = document.getElementById(`container`);
let colorPicker = document.getElementById(`colour_picker`);
let rainbowButton = document.getElementById(`rainbow`);
let range = document.getElementById(`grid_range`);

let currentColorMode = 'user'; // Initial mode is user-selected color

function createGrid(number) {
  totalNumber = number * number;
  while (container.hasChildNodes()) {
    container.removeChild(container.firstChild);
  }

  for (let i = 0; i < totalNumber; i++) {
    let gridSquare = document.createElement("div");
    gridSquare.classList.add("grid_square");

    let cellwidth = container.clientWidth / number + `px`;
    let cellheight = container.clientHeight / number + `px`;

    gridSquare.style.width = `${cellwidth}`;
    gridSquare.style.height = `${cellheight}`;
    container.appendChild(gridSquare);

    // Add event listener for coloring on mouseover
    gridSquare.addEventListener("mouseover", handleGridSquareMouseOver);
  }
}

function handleGridSquareMouseOver(event) {
  if (currentColorMode === 'user') {
    // Use user-selected color
    event.target.style.backgroundColor = colorPicker.value;
  } else if (currentColorMode === 'rainbow') {
    // Use random color for the rainbow mode
    event.target.style.backgroundColor = getRandomColor();
  }
}

function getRandomColor() {
  // Function to generate a random hex color
  return `#${Math.floor(Math.random()*16777215).toString(16)}`;
}

document.addEventListener("DOMContentLoaded", () => {
  createGrid(range.value);
});

range.addEventListener(`change`, () => {
  createGrid(range.value);
});

// Event listener for the Rainbow button
rainbowButton.addEventListener('click', () => {
  // Set the current mode to rainbow
  currentColorMode = 'rainbow';
});

// You can also add an event listener for the color picker change if needed
colorPicker.addEventListener('input', () => {
  // Update the existing grid with the new color
  currentColorMode = 'user';
  updateGridColor(colorPicker.value);
});

function updateGridColor(color) {
  let gridSquares = document.getElementsByClassName("grid_square");
  for (let i = 0; i < gridSquares.length; i++) {
    gridSquares[i].style.backgroundColor = color;
  }
}