事件循环

Question

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

我的猜测是，当条件为false时，i又被设置为0，我是否正确地理解了这一点？希望有人能帮我，我在网上找不到这个问题的解释。

 <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;
 }}
}());

Answer 1

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

因此，在您可以单击循环已经完成的任何位置之前，在每个按钮中添加一个onclick函数，每次都会调用该函数，然后单击该按钮。

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

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