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

Question

我有一个 16x16 的小方块网格。我添加了一个永久的“悬停”效果，当我将鼠标放在第一个框上时，它会变成红色。但是，我想为页面上的所有框添加相同的效果。我不知道该怎么做 - 我尝试向整个页面添加事件侦听器并使用 target.nodeName 和 target.NodeValue，但无济于事。我已经包含了工作版本，其中修复框在鼠标悬停时变为红色。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 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 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>

另一种选择是使用您确定的事件委托。以下是您可以如何利用它。注意：对于像“鼠标悬停”这样的攻击性事件，这种方法有点棘手，因为您可能会得到误报目标（例如外部容器）。

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>

Answer 2

您需要使用委托事件，因为加载页面时页面上并不存在所有小框（您可以在检查器元素中找出只有第一个框具有事件侦听器）。

所以你监听整个容器（因为它总是在加载时的页面上）

bigContainer.addEventListener('mouseover', () => {

    // Code for checking if we hovered a small div & if yes applying the style

});

...然后与event.target（这将是悬停的小div）进行比较

if (event.target.matches('.smallBox')) {

    event.target.classList.add('permahover');

}

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');

bigContainer.addEventListener('mouseover', () => {

    if (event.target.matches('.smallBox')) {

        event.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 3

您应该将事件侦听器设置为您的 DOM，并询问触发元素是否是属于该特定类的元素之一。因此您可以使用该类处理每个元素。

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">';

  }

}

document.addEventListener('mouseover', function(e) {

  if (e.target && e.target.className == 'smallBox') {

        var target = e.target;

        target.classList.add('permahover');

  }

});

工作js小提琴：https://jsfiddle.net/nwukf205/

希望我能帮助你:)如果你有问题就问

Answer 4

您可以使用forEach方法循环遍历所有框并在每个框上添加事件监听器。如果他们都有.smallBox课程，你可以这样做：

const smallBoxes = document.querySelectorAll('.smallBox');

smallBoxes.forEach(box => box.addEventListener('mouseover', () => {

    smallBox.classList.add('permahover');

}))

我希望它对你有帮助！

Answer 5

let smallBoxes = document.querySelectorAll('.smallBox');

[...smallBoxes].forEach(el => {

    el.addEventListener('mouseover', e => e.target.classList.add('permahover'));

});