无法将javascript eventListener添加到最近创建的元素_Javascript_Web_Event Handling

无法将javascript eventListener添加到最近创建的元素

javascript web

无法将javascript eventListener添加到最近创建的元素,javascript,web,event-handling,Javascript,Web,Event Handling,我使用Javascript创建了625，然后我想为每个框添加事件侦听器。框已成功创建，但侦听器未工作。这是我的全部代码，非常感谢您的回复。谢谢 <!DOCTYPE html> <html> <head> <title>Number AI | Machine Learning Technologhy</title> <style> .box-container{ disp

我使用Javascript创建了625

，然后我想为每个框添加事件侦听器。框已成功创建，但侦听器未工作。这是我的全部代码，非常感谢您的回复。谢谢

<!DOCTYPE html>
<html>
<head>
    <title>Number AI | Machine Learning Technologhy</title>
    <style>
        .box-container{
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        }
        .box{
            width:10px;
            height:10px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function initiateBox(){
            for (let i = 0; i < 625; i++) {
                let box = document.createElement("DIV");
                box.classList.add("box");
                document.querySelector('.box-container').appendChild(box);
            }
        };
        window.onload = initiateBox;
    </script>
</head>
    <body>
        <h2>Number AI</h2>
        <div class="box-container"></div>
        
        <script>
            document.querySelectorAll(".box").forEach(box =>{
                box.addEventListener("mouseover",function(){
                    box.style.backgroundColor = 'black';
                });
            });
        </script>
    </body>
</html>


数字AI |机器学习技术
.盒式集装箱{
显示：网格；
宽度：300px；
高度：300px；
边框：1px纯蓝色；
网格模板列：自动；
}
.盒子{
宽度：10px；
高度：10px；
边框：1px纯黑；
文本对齐：居中；
}
函数initiateBox（）{
for（设i=0；i<625；i++）{
let box=document.createElement（“DIV”）；
box.classList.add（“box”）；
document.querySelector（“.box container”）.appendChild（box）；
}
};
window.onload=initiateBox；
数字AI
document.queryselectoral（“.box”）.forEach（box=>{
box.addEventListener（“鼠标悬停”，函数（）{
box.style.backgroundColor='黑色'；
});
});

有几件事

在加载和鼠标悬停时使用addEventListeners

委托，以便您可以在容器存在后的任何时间对框进行抛光

也许CSS悬停是实现这一点的实际方法

无论如何，这是授权脚本

函数initiateBox（）{
const container=document.querySelector（“.box container”）；
for（设i=0；i<625；i++）{
let box=document.createElement（“div”）；
box.classList.add（“box”）；
容器.附件（盒）；
}
container.addEventListener（“鼠标悬停”，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“box”））tgt.style.backgroundColor='black'；
});
};
window.addEventListener（“加载”，initiateBox）

.box容器{
显示：网格；
宽度：300px；
高度：300px；
边框：1px纯蓝色；
网格模板列：自动；
}
.盒子{
宽度：10px；
高度：10px；
边框：1px纯黑；
文本对齐：居中；
}

Number AI |机器学习技术
数字AI

好吧，这里有几个选项。但最简单的方法（不是最有效的方法）是在创建框时添加事件侦听器，如下所示：


数字AI |机器学习技术
.盒式集装箱{
显示：网格；
宽度：300px；
高度：300px；
边框：1px纯蓝色；
网格模板列：自动；
}
.盒子{
宽度：10px；
高度：10px；
边框：1px纯黑；
文本对齐：居中；
}
函数initiateBox（）{
for（设i=0；i<625；i++）{
let box=document.createElement（“DIV”）；
box.classList.add（“box”）；
box.addEventListener（“鼠标悬停”，函数（）{
box.style.backgroundColor='黑色'；
});
document.querySelector（“.box container”）.appendChild（box）；
}
};
window.onload=initiateBox；
数字AI

我认为第二个脚本是在将box元素附加到文档之前运行的，因此找不到任何box。您可以将eventListener添加到您创建的initiateBox函数中，如下所示：

function initiateBox(){
        for (let i = 0; i < 625; i++) {
            let box = document.createElement("DIV");
            box.classList.add("box");
            box.addEventListener("mouseover",function(){
                box.style.backgroundColor = 'black';
            });
            document.querySelector('.box-container').appendChild(box);
        }
    };
    window.onload = initiateBox;

函数initiateBox（）{
for（设i=0；i<625；i++）{
let box=document.createElement（“DIV”）；
box.classList.add（“box”）；
box.addEventListener（“鼠标悬停”，函数（）{
box.style.backgroundColor='黑色'；
});
document.querySelector（“.box container”）.appendChild（box）；
}
};
window.onload=initiateBox；

如果背景颜色实际上是您要在鼠标上方更改的属性，我建议您使用CSS悬停进行更改。

您还必须在加载处理程序中附加事件。当前

querySelectorAll

未找到任何元素，因为它们尚未创建。请注意，使用事件委派，而不是创建625个函数和事件，您可以将单个侦听器附加到

.box container

元素，并更改

event.target

的背景色。使用625个事件侦听器效率很低。有很多好处-这里仅是2:1。内存占用更小-您现在有625个侦听器2。您可以稍后添加更多框，它们仍然可以工作，而无需添加更多listeners@mplungjan我完全同意这一点，但正如我所说的625事件侦听器不会导致任何内存泄漏或其他问题。但把它添加到父母身上可能更明智、更有益。由于它的优雅，似乎一般建议将其委托给他人，并且个人更喜欢它。同样，您可以在同一个代表团中查看不同的子元素SAH，因此您只是将我的代码添加到您的代码中，而不是投票支持我的答案？使用625个EventListener，效率非常低