如何为动态生成的Div元素添加鼠标悬停背景色切换功能

核心问题分析 #

1. document.querySelectorAll('main.child')执行时机过早：DOM加载完成时动态div还未生成，导致divSelector是空数组，后续循环完全没执行。
2. 多个动态div复用同一个id="etch"：ID在页面中必须唯一，这类场景应该改用class标识。
3. 事件委托写法冗余：没必要循环空数组绑定监听，直接给已存在的父元素绑定一次监听，利用事件冒泡处理动态元素即可。

修正后的代码 #

HTML部分（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch-A-Sketch</title>
  <script src="./app.js" defer></script>
</head>

<body>
  <div id="main">

  </div>
</body>

</html>

JavaScript部分

let gridSize = gridMaker();
setupHoverEffect();

function gridMaker () {
    let size = prompt('Enter a size: ')
    for (let i = 0; i < size; i++) {
        const div = document.createElement("div");
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.background = "red";
        div.style.margin = '10px';
        div.className = 'etch'; // 用class替代重复ID
    
        document.getElementById("main").appendChild(div);
    }
}

// 事件委托处理动态元素悬停
function setupHoverEffect () {
    const mainContainer = document.getElementById('main');
    mainContainer.addEventListener('mouseover', (e) => {
        if (e.target.classList.contains('etch')) {
            e.target.style.background = 'blue'; // 替换为你需要的颜色
        }
    });
}

关键知识点说明 #

• 事件委托：借助DOM事件冒泡特性，把监听器绑定到已存在的父元素上，动态生成的子元素触发事件时，事件会冒泡到父元素，通过e.target判断目标元素后执行逻辑。
• 避免重复ID：页面内ID必须唯一，批量生成同类元素时用class做标识更合理。
• 变量声明规范：动态生成元素时用const替代var，避免变量提升引发的意外问题。

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