javascript - 循环并不总是被调用，但检查更改事件的函数总是在循环内调用

Question

我是 JavaScript 新手，我有一个对我来说有点奇怪的问题......

我已经在 HTML 中创建了复选框，并且我想检测复选框何时被选中，因此在下面的函数中， 当我打开浏览器时，下面的循环会被调用一次，但是当我每次检查复选框时，总是会调用 checkbox.onchange = function(e) 的方法，但是循环不再调用，一般我认为在编程中当循环里面有一个方法时，先循环调用然后方法。

checkbox.onchange = function(e) 所以在这种情况下，我认为在调用此方法之前，程序应该在循环之前调用，然后将该方法作为循环内的方法，但我的问题是，为什么该方法不循环调用？

const checkboxes = document.querySelectorAll('.check-completed')
    for (let i = 0; i < checkboxes.length; i++){

        const checckbox = checkboxes[i];

        console.log('list of checkbox ',checckbox);

        checckbox.onchange = function(e){
            console.log('event', e);               
        }

    }

Answer 1

您目前正在做的是:

1. 您正在循环遍历所有复选框
2. 选择单个复选框
3. 在每个复选框上附加一个事件监听器。
4. 就是这样。循环工作结束。循环将永远不会再次执行。

现在，当您单击复选框时，它只会调用附加的事件处理程序。现在，如果您想再次运行循环，则需要在事件处理程序中添加一个 for 循环。

类似这样的事情。

checckbox.onchange = function(e) {
  for (let i = 0; i < checkboxes.length; i++) {
    console.log(checkboxes[i].value)
  }
}