如何为动态生成的div添加mouseover事件实现悬停上色？

问题描述 #

需要实现鼠标悬停在动态生成的div上时为其上色的功能，这些div是用户调整range输入框的值后在container容器内创建的，无法通过外部函数直接访问它们。之前尝试在createGrid函数的循环中为每个gridSquare添加mouseover事件监听器直接设置背景色，但希望改用专门的外部上色函数实现，而非在创建div时绑定事件。

现有HTML代码 #

<body>
    <div>   
        <div id="outer_container">
        <div id="container"> </div>
    </div>
    
    <div id="user_input_container">
        <input type="color" class="user_input" name="" id="colour_picker" value="#000000">

        <button class="user_input" id="rainbow">Rainbow</button>
    <div>

        <div>
            <input class="user_input" type="range" min="2" max="100" value="16" name="options"
                id="grid_range">
        </div>

</body>

现有JavaScript代码 #

let container = document.getElementById(`container`);
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);
  }
}

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

let range = document.getElementById(`grid_range`);

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

let color = document.getElementById(`colour_picker`);

之前的尝试（需替换） #

gridSquare.addEventListener("mouseover", (event) => {
  event.target.style.backgroundColor = color.value;
});

解决方案 #

采用事件委托机制，直接在容器上绑定一次事件，搭配独立的外部上色函数实现需求，无需为每个动态生成的元素单独绑定事件。

1. 编写独立的外部上色函数 #

定义专门的上色函数，负责处理背景色设置逻辑，同时判断触发元素是否为目标网格方块：

function colorGridSquare(event) {
  // 仅对带有grid_square类的元素生效
  if (event.target.classList.contains('grid_square')) {
    event.target.style.backgroundColor = color.value;
  }
}

2. 为容器绑定事件委托 #

在DOM初始化完成后，给container绑定mouseover事件，调用上述上色函数：

document.addEventListener("DOMContentLoaded", () => {
  createGrid(range.value);
  // 绑定事件委托到容器
  container.addEventListener('mouseover', colorGridSquare);
});

完整修改后的JavaScript代码 #

let container = document.getElementById(`container`);
let range = document.getElementById(`grid_range`);
let color = document.getElementById(`colour_picker`);

// 独立外部上色函数
function colorGridSquare(event) {
  if (event.target.classList.contains('grid_square')) {
    event.target.style.backgroundColor = color.value;
  }
}

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);
  }
}

document.addEventListener("DOMContentLoaded", () => {
  createGrid(range.value);
  // 事件委托绑定
  container.addEventListener('mouseover', colorGridSquare);
});

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

方案优势 #

• 性能更优：仅绑定一次事件，避免循环中重复绑定的冗余操作
• 扩展性强：上色逻辑集中在独立函数中，后续修改（如添加彩虹模式、渐变效果）只需调整该函数
• 适配动态元素：无论网格如何重新生成，事件都会自动对新元素生效

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