如何解决无法将javascript eventListener添加到最近创建的元素
我使用Javascript创建了625 <div class="box"><div>
,然后我想为每个框添加事件监听器。框已成功创建,但侦听器无法正常工作。这是我的完整代码,非常感谢您的所有答复。谢谢
<!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>
解决方法
几件事
- 在加载和鼠标悬停时使用addEventListeners
- 委托,以便您可以在容器存在后随时对框进行确认
- 也许CSS悬停是执行此操作的实际方法?
无论如何,这是委派脚本
function initiateBox() {
const container = document.querySelector('.box-container');
for (let i = 0; i < 625; i++) {
let box = document.createElement("div");
box.classList.add("box");
container.appendChild(box);
}
container.addEventListener("mouseover",function(e) {
const tgt = e.target;
if (tgt.classList.contains("box")) tgt.style.backgroundColor = 'black';
});
};
window.addEventListener("load",initiateBox)
.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;
}
<title>Number AI | Machine Learning Technologhy</title>
<h2>Number AI</h2>
<div class="box-container">
</div>
,
好吧,您在这里有几个选择。但是最简单的(不是高效的)是在创建框时添加事件监听器,如下所示:
<!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");
box.addEventListener("mouseover",function() {
box.style.backgroundColor = 'black';
});
document.querySelector('.box-container').appendChild(box);
}
};
window.onload = initiateBox;
</script>
</head>
<body>
<h2>Number AI</h2>
<div class="box-container"></div>
</body>
</html>
但是无论如何,如果您正在寻找一种有效的方法来实现此目的,如@mplungjan在评论中指出的,最好使用delegation这样的方法:
<!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() {
const boxContainer = document.querySelector('.box-container');
for (let i = 0; i < 625; i++) {
let box = document.createElement("DIV");
box.classList.add("box");
boxContainer.appendChild(box);
}
boxContainer.addEventListener("mouseover",function(event) {
const target = event.target;
if (target.classList.contains('box'))
target.style.backgroundColor = 'black';
});
};
window.onload = initiateBox;
</script>
</head>
<body>
<h2>Number AI</h2>
<div class="box-container"></div>
</body>
</html>
,
我认为第二个脚本是在将box元素附加到文档之前运行的,因此找不到任何box。您可以将eventListener添加到创建的initializeBox函数中,如下所示:
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;
如果背景颜色实际上是您要在mouseOver上更改的属性,我还是建议您使用CSS悬停来实现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。