用于带有事件的循环

For loop with events

本文关键字：循环 事件 用于      更新时间：2023-09-26

我正在使用一个在线教程，并试图理解下面的代码。我不明白的是为什么这种方法能用两次以上。当循环已经执行了两次i == len并且条件i < len不再为真时。那么，为什么可以将不同的类切换两次以上呢？

我的猜测是，当条件为false时，i再次被设置为0，我理解正确吗？希望有人能帮我，我在网上找不到关于这个问题的解释。

HTML

 <button>Normal</button>
 <button>Changed</button>

CSS

.normal {background-color: white;color:black;}
.changed {background-color: black;color:white;}

JavaScript

(function() {
var buttons = document.getElementsByTagName("button");
for (var i = 0, len = buttons.length; i < len; i +=1)
  buttons[i].onclick = function() {
    var className = this.innerHTML.toLowerCase();
    document.body.className = className;
 }}
}());

for循环只执行一次，并遍历所有按钮。在for循环体中，为每个按钮定义一个onclick函数。

因此，在你可以点击循环已经完成的任何地方，并为每个按钮添加一个onclick函数（每次都会调用）之前，你点击该按钮。

使用button[i].onclick = function() {...}，您可以向按钮单击事件添加一个事件处理程序函数。

您应该阅读更多关于事件处理程序的内容。

相关文章：