javascript-events - 带有事件的 for 循环

Question

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

我的猜测是，当条件为假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;
 }}
}());

Answer 1

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

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

随着button[i].onclick = function() {...}您向按钮单击事件添加事件处理函数。

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