如何为页面上的所有div添加鼠标悬停效果？

Question

我有一个 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>

Answer 1

您遇到的直接问题是，这只是查询，然后向一个元素添加事件侦听器。const smallBox = document.querySelector('.smallBox');smallBox.addEventListener('mouseover', () => {    smallBox.classList.add('permahover');});在上面的代码部分中，querySelector仅返回第一个匹配元素。您可能正在此处查找querySelectorAll ，它返回匹配元素的NodeList。您有两个选择（如果您想进一步重组代码，也许还有其他选择）。事实上，最简单的方法是查询所有单元格并向每个单元格添加事件侦听器。var n=16; //take grid column value as you wantconst 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>另一种选择是使用您确定的事件委托。以下是您可以如何利用它。注意：对于像“鼠标悬停”这样的攻击性事件，这种方法有点棘手，因为您可能会得到误报目标（例如外部容器）。var n=16; //take grid column value as you wantconst 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>

Answer 2

您需要使用委托事件，因为加载页面时页面上并不存在所有小框（您可以在检查器元素中找出只有第一个框具有事件侦听器）。所以你监听整个容器（因为它总是在加载时的页面上）bigContainer.addEventListener('mouseover', () => {&nbsp; &nbsp; // Code for checking if we hovered a small div & if yes applying the style});...然后与event.target（这将是悬停的小div）进行比较if (event.target.matches('.smallBox')) {&nbsp; &nbsp; event.target.classList.add('permahover');}var n=16; //take grid column value as you wantconst bigContainer = document.querySelector('.bigContainer')for(var i = 1; i < n; i++) {&nbsp; &nbsp; bigContainer.innerHTML+='<div class="row">';&nbsp; &nbsp; for(j = 0; j < n; j++) {&nbsp; &nbsp; &nbsp; &nbsp; bigContainer.innerHTML+='<div class="smallBox">';&nbsp; &nbsp; }}const smallBox = document.querySelector('.smallBox');bigContainer.addEventListener('mouseover', () => {&nbsp; &nbsp; if (event.target.matches('.smallBox')) {&nbsp; &nbsp; &nbsp; &nbsp; event.target.classList.add('permahover');&nbsp; &nbsp; }});.smallBox {&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; display: inline-block;}.permahover {&nbsp; &nbsp; background: red;}h1 {&nbsp; &nbsp; text-align: center;}.bigContainer {&nbsp; &nbsp; text-align: center;}<h1>Etch-a-Sketch Assignment - The Odin Project</h1><div class="bigContainer"></div>

Answer 3

您应该将事件侦听器设置为您的 DOM，并询问触发元素是否是属于该特定类的元素之一。因此您可以使用该类处理每个元素。var n = 16; //take grid column value as you wantconst bigContainer = document.querySelector('.bigContainer')for (var i = 1; i < n; i++) {&nbsp; bigContainer.innerHTML += '<div class="row">';&nbsp; for (j = 0; j < n; j++) {&nbsp; &nbsp; bigContainer.innerHTML += '<div class="smallBox">';&nbsp; }}document.addEventListener('mouseover', function(e) {&nbsp; if (e.target && e.target.className == 'smallBox') {&nbsp; &nbsp; &nbsp; &nbsp; var target = e.target;&nbsp; &nbsp; &nbsp; &nbsp; target.classList.add('permahover');&nbsp; }});工作js小提琴：https://jsfiddle.net/nwukf205/希望我能帮助你:)如果你有问题就问

Answer 4

您可以使用forEach方法循环遍历所有框并在每个框上添加事件监听器。如果他们都有.smallBox课程，你可以这样做：const smallBoxes = document.querySelectorAll('.smallBox');smallBoxes.forEach(box => box.addEventListener('mouseover', () => {&nbsp; &nbsp; smallBox.classList.add('permahover');}))我希望它对你有帮助！

Answer 5

let smallBoxes = document.querySelectorAll('.smallBox');[...smallBoxes].forEach(el => {&nbsp; &nbsp; el.addEventListener('mouseover', e => e.target.classList.add('permahover'));});