JavaScript for 循环中的事件绑定导致重复执行问题

以下代码展示了在 JavaScript for 循环中使用 label.onclick 绑定事件处理函数导致 console.log(1) 语句被重复执行两次的问题：

for (const key in config) {
    console.log(config[key]);
    let label = document.createElement('label')
    let input = document.createElement('input')
    let span = document.createElement('span')
    input.type = 'checkbox'
    input.checked = config[key].option
    span.innerText = config[key].name
    label.appendChild(input)
    label.appendChild(span)
    boss.appendChild(label)
    boss.style.bottom = '26px'
    label.onclick = function () {
      config[key].option = input.checked
      // console.log(config[key]);
      console.log(1);
    }

  }

问题原因：

在 for 循环中，每次循环都会创建一个新的 label 元素，并使用 label.onclick 为其绑定一个新的匿名函数。因此，当点击任何一个 label 元素时，都会执行所有 label 元素上绑定的匿名函数，导致 console.log(1) 被重复执行两次。

解决方案：

为了避免重复执行，可以使用 addEventListener 方法将事件处理函数绑定到 label 元素上。这样可以确保只有一个事件处理函数被绑定到 label 元素上。

for (const key in config) {
    console.log(config[key]);
    let label = document.createElement('label')
    let input = document.createElement('input')
    let span = document.createElement('span')
    input.type = 'checkbox'
    input.checked = config[key].option
    span.innerText = config[key].name
    label.appendChild(input)
    label.appendChild(span)
    boss.appendChild(label)
    boss.style.bottom = '26px'
    label.addEventListener('click', function () {
      config[key].option = input.checked
      // console.log(config[key]);
      console.log(1);
    });

  }

通过使用 addEventListener 方法，我们确保每个 label 元素只绑定了一个事件处理函数，从而避免了重复执行的问题。