使用闭包工作处理许多元素上的事件和一个for循环，但为什么呢？

Question

我有这个代码将事件监听器分配给一堆文章：

var toggleButtons = document.querySelectorAll('article > div > span');
var articles = document.querySelectorAll('article');

for (var i = 0; i < articles.length; i++) {
  (function(i) {
    var article = articles[i];
    var button = toggleButtons[i];

    article.classList.toggle('article-closed');

    button.addEventListener('click', function() {
      article.classList.toggle('article-closed');

      if (button.innerHTML === "Lees meer") {
        button.innerHTML = "Sluiten";
      } else {
        button.innerHTML = "Lees meer";
      }
    });
  })(i);
}

这很棒！但我无法找到它在任何地方的运作方式......我希望有人可以向我解释这一点。谢谢！