javascript - for循环中的addEventListener

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>

我的脚本用粗体显示并在某些文本上放有背景，是当鼠标指针悬停在该文本上时才对第二个元素起作用。.（Resulat 2）有人可以告诉我为什么，因为我所做的一切都适合我，即使我JS初学者。

最佳答案

您的division中的function()是什么？它与您每次在division处更改的division = div[i];相同。 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);
}

关于javascript - for循环中的addEventListener，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13344061/