JS 循环li添加点击事件（闭包的应用）

2023年6月10日下午9:30 • JavaScript

JS 循环li添加点击事件（闭包的应用）攻略

在 Web 前端开发中，经常需要对列表中的每一项元素进行操作，可是一般的循环添加事件时会出现事件函数中变量值不符合预期的问题。这时候，就需要用到闭包的思想。以下是实现思路和代码示例。

实现思路

找到列表元素的父级元素
找到列表元素，可以通过 querySelectorAll 来找到（或者使用 children）
遍历列表元素，利用闭包来绑定 click 事件并保存索引

代码示例一

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS 循环li添加点击事件（闭包的应用）</title>
  </head>
  <body>
    <ul id="list">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
    </ul>
    <script>
      const list = document.querySelector("#list");
      const items = list.querySelectorAll("li");

      for (let i = 0; i < items.length; i++) {
        (function (index) {
          items[index].addEventListener("click", function () {
            console.log("you clicked item ", index + 1);
          });
        })(i);
      }
    </script>
  </body>
</html>

代码解析：

首先使用 querySelector 方法找到了 <ul> 元素，然后使用 querySelectorAll 方法找到所有 <li> 子元素。在循环添加事件函数时，在闭包中使用 let 声明变量将索引保存下来，并在事件函数中使用该索引值。

代码示例二

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS 循环li添加点击事件（闭包的应用）</title>
  </head>
  <body>
    <ul id="list">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
    </ul>
    <script>
      const list = document.querySelector("#list");
      const items = list.querySelectorAll("li");

      items.forEach(function (item, index) {
        item.addEventListener("click", function () {
          console.log("you clicked item ", index + 1);
        });
      });
    </script>
  </body>
</html>

代码解析：

使用 querySelector 和 querySelectorAll 找到 <ul> 和 <li> 元素，然后使用 forEach 方法简化循环添加事件函数过程。在 forEach 传入的回调函数中，第二个参数就是当前元素的索引值，直接可以使用该变量。