addEventListener 使用 for 循环并传递值[重复]

使用 for 循环并传递值来给 addEventListener 添加事件监听器是一种常见的开发技巧。这种方法可以帮助我们简化代码并提高代码的可维护性。在本文中，我们将探讨如何使用 for 循环来给多个元素添加相同的事件监听器，并传递不同的值作为参数。

使用 for 循环给多个元素添加事件监听器

在前端开发中，我们经常需要给多个元素添加相同的事件监听器，例如点击事件。如果我们一个个手动给每个元素添加事件监听器，代码会显得冗长且重复。为了解决这个问题，我们可以使用 for 循环来自动化这个过程。

假设我们有一组按钮，每个按钮都需要有自己独特的功能。我们可以使用 for 循环来给每个按钮添加点击事件的监听器，并传递不同的值作为参数。

html
<button id="button1">按钮 1</button>
<button id="button2">按钮 2</button>
<button id="button3">按钮 3</button>
<script>
  // 获取所有按钮元素
  const buttons = document.querySelectorAll('button');
  // 使用 for 循环给每个按钮添加点击事件的监听器
  for (let i = 0; i < buttons.length; i++) {</p>    buttons[i].addEventListener('click', function() {
      console.log('按钮' + (i+1) + '被点击了');
    });
  }
</script>

在上面的例子中，我们首先使用 document.querySelectorAll 方法获取了所有的按钮元素，并将它们存储在 buttons 变量中。然后，我们使用 for 循环遍历每个按钮，并给每个按钮添加了一个点击事件的监听器。在监听器函数中，我们使用了参数 i+1 来表示当前按钮的索引值。

优化代码

虽然上面的代码可以实现给多个按钮添加点击事件的监听器，但每次循环都会创建一个新的监听器函数，这可能会影响性能。为了优化代码，我们可以使用闭包来确保每个按钮都拥有自己独立的监听器函数。

html
<button id="button1">按钮 1</button>
<button id="button2">按钮 2</button>
<button id="button3">按钮 3</button>
<script>
  const buttons = document.querySelectorAll('button');
  for (let i = 0; i < buttons.length; i++) {</p>    buttons[i].addEventListener('click', (function(index) {
      return function() {
        console.log('按钮' + (index+1) + '被点击了');
      }
    })(i));
  }
</script>

在上面的例子中，我们使用了一个自执行的匿名函数来创建闭包。这个匿名函数接受一个参数 index，它的值就是当前按钮的索引值。然后，这个匿名函数返回一个新的监听器函数，这个函数可以访问到 index 参数的值。通过这种方式，我们可以确保每个按钮都有自己独立的监听器函数，且不会受到循环变量 i 的影响。

通过使用 for 循环并传递值给 addEventListener，我们可以简化代码并提高代码的可维护性。这种方法适用于给多个元素添加相同的事件监听器，并传递不同的值作为参数。我们还介绍了如何使用闭包来优化代码，确保每个元素都拥有独立的监听器函数。

总的来说，使用 for 循环并传递值给 addEventListener 是一种非常实用的技巧，可以帮助我们更高效地处理多个元素的事件监听需求。希望本文对你理解这个概念有所帮助，并能在你的开发工作中得到应用。