我有一个16x16的小方块网格。我添加了永久的“悬停”效果，当我将鼠标放在其上方时，使第一个框变为红色。但是，我想向页面上的所有框添加相同的效果。我不知道该怎么做-我试图在整个页面上添加一个事件监听器，并使用了target.nodeName和target.NodeValue，但无济于事。我包含了工作版本，其中，将鼠标悬停时修复框变为红色。
var n=16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for(var i = 1; i < n; i++) {
bigContainer.innerHTML+='<div class="row">';
for(j = 0; j < n; j++) {
bigContainer.innerHTML+='<div class="smallBox">';
}
}
const smallBox = document.querySelector('.smallBox');
smallBox.addEventListener('mouseover', () => {
smallBox.classList.add('permahover');
});.smallBox {
border: 1px solid black;
width: 20px;
height: 20px;
display: inline-block;
}
.permahover {
background: red;
}
h1 {
text-align: center;
}
.bigContainer {
text-align: center;
}<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">
</div>您遇到的直接问题是，这仅是查询一个元素，然后向其中添加一个事件侦听器。
const smallBox = document.querySelector('.smallBox');
smallBox.addEventListener('mouseover', () => {
smallBox.classList.add('permahover');
});
在代码的上面部分，querySelector仅返回第一个匹配的元素。您可能在此处查找querySelectorAll，该查询返回匹配元素的NodeList。
您有两个选择（如果您想进一步重组代码，可能还有其他选择）。天真的方法实际上是查询所有单元，并向每个单元添加事件侦听器。
var n=16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for(var i = 1; i < n; i++) {
bigContainer.innerHTML+='<div class="row">';
for(j = 0; j < n; j++) {
bigContainer.innerHTML+='<div class="smallBox">';
}
}
const smallBoxes = document.querySelectorAll('.smallBox');
[...smallBoxes].forEach(smallBox => {
smallBox.addEventListener('mouseover', () => {
smallBox.classList.add('permahover');
});
}).smallBox {
border: 1px solid black;
width: 20px;
height: 20px;
display: inline-block;
}
.permahover {
background: red;
}
h1 {
text-align: center;
}
.bigContainer {
text-align: center;
}<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">
</div>另一个选择是使用您确定的事件委托。这是您可以利用的方法。注意：这种方法对于诸如“ mouseover”之类的侵略性事件来说有点技巧，因为您可能会得到假阳性目标（例如外部容器）。
var n=16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for(var i = 1; i < n; i++) {
bigContainer.innerHTML+='<div class="row">';
for(j = 0; j < n; j++) {
bigContainer.innerHTML+='<div class="smallBox">';
}
}
bigContainer.addEventListener('mouseover', e => {
var target = e.target
if (target !== bigContainer) {
target.classList.add('permahover')
}
}).smallBox {
border: 1px solid black;
width: 20px;
height: 20px;
display: inline-block;
}
.permahover {
background: red;
}
h1 {
text-align: center;
}
.bigContainer {
text-align: center;
}<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句