javascript - 在 for 循环中添加事件监听器

Question

myDiv = document.getElementById('results');

div = myDiv.getElementsByTagName('div');


for (var i = 0; i < div.length; i++) {
    var division;
    division = div[i];

    // console.log(div[i]);

    division.addEventListener('mouseover', function () {
        division.style.fontWeight = "bold";
        division.style.background = "rgba(0, 7, 255, 0.29)";
    }, false);

    division.addEventListener('mouseout', function () {
        division.style.fontWeight = "";
        division.style.background = "";

    }, false);

这是 html 代码:

<div id="results">
    <div>Resulat 1</div>
    <div>Resulat 2</div>

</div>

当鼠标指针悬停在某些文本上时，我的脚本会加粗并在某些文本上添加背景，仅适用于第二个元素。( <div>Resulat 2</div> )

有人可以告诉我为什么吗，因为我所做的一切都适合我，即使我是一个 JS 初学者。

Answer 1

你的function()中的division是什么？它与您在每次迭代中在 division = div[i]; 处更改的 division 相同。 for 循环完成后，division 为 div[1]。这就是为什么您只更改第二个 div 的原因。

您可以使用闭包来解决此问题，或者使用 this 访问关联对象:

division.addEventListener('mouseover', function () {
    this.style.fontWeight = "bold";
    this.style.background = "rgba(0, 7, 255, 0.29)";
}, false);

division.addEventListener('mouseout', function () {
    this.style.fontWeight = "";
    this.style.background = "";
}, false);

但是，使用 CSS 可以轻松实现您想要的效果:

#results > div:hover{
    font-weight:bold;
    background-color:rgba(0,7,255,0.29);
}