Question

我正在尝试使用以下方法在for循环内添加事件监听器“ mouseover”：

<!DOCTYPE html>
<html>
<head>
    <title>BUTTONS</title>
</head>
<body>
    <button>BUTTON 1</button>
    <button>BUTTON 2</button>
<script type="text/javascript">
    var buttons = document.querySelectorAll("button");
    for(i=0;i<buttons.length;i++){
    buttons[i].addEventListener("mouseover",function(){
        this.style.backgroundColor = "gray";
    });
        }
</script>
</body>
</html>

非常感谢，它运行良好。我尝试不使用'this'关键字来尝试代码

<!DOCTYPE html>
<html>
<head>
    <title>BUTTONS</title>
</head>
<body>
    <button>BUTTON 1</button>
    <button>BUTTON 2</button>
<script type="text/javascript">
    var buttons = document.querySelectorAll("button");
    for(i=0;i<buttons.length;i++){
    buttons[i].addEventListener("mouseover",function(){
        buttons[i].style.backgroundColor = "gray";
    });
        }
</script>
</body>
</html>

因为我认为在for循环内，所有内容都将翻译为

buttons[0].addEventListener("mouseover",function(){
        buttons[0].style.backgroundColor = "gray";
    });

和

buttons[1].addEventListener("mouseover",function(){
        buttons[1].style.backgroundColor = "gray";
    });

应该可以正常工作。但是，为什么呢？

Answer 1

使用let在 for 循环中声明变量，这将创建一个 块作用域局部变量 。这样可以确保i的值将在每次迭代中正确保留。

<button>BUTTON 1</button>
<button>BUTTON 2</button>
<script type="text/javascript">
  var buttons = document.querySelectorAll("button");
  for(let i=0;i<buttons.length;i++){
    buttons[i].addEventListener("mouseover",function(){
      buttons[i].style.backgroundColor = "gray";
    });
  }
</script>

在For循环内添加事件监听器

1 个答案: