循环绑定事件中的i值问题

离逝的枫

已于 2023-03-22 15:58:29 修改

阅读量140

点赞数

分类专栏： JS 文章标签： javascript 前端 vue.js Powered by 金山文档

于 2023-03-20 15:54:18 首次发布

本文链接：https://blog.csdn.net/qq_51130780/article/details/129668966

版权

JS 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

在我们学习JS初期，往往会遇到一个共同的问题，例如我们需要给一行的按钮同时添加一个点击时间例如我们在这里进行一个小的练习，例如添加一个时间，打印它是第几个按钮。

  <button>点我+1</button>
  <button>点我+1</button>
  <button>点我+1</button>
  <script>
    var btnList = document.getElementsByTagName('button')
    //这里为什么不用btnList.length 后面会进行其他说明
    //但是我们会发现，通过下面的代码好像看似没有问题，但是没法达到我们的需求，因此需要做出相应的修改  
    for(var i =0,length = btnList.length;i<length;i++){
      btnList[i].onclick=function(){
        console.log(i);
      }
    }

使用let块级作用域完成该需求

我们只需要将上述中的var定义的变量修改为块级作用域，即let定义的变量，即可满足我们的需求，这也是经常在遍历按钮，添加事件中常用的一种方法获取对应的i值

    for(let i =0,length = btnList.length;i<length;i++){
      btnList[i].onclick=function(){
        console.log(i);
      }
    }

使用IIFE立即执行函数完成该需求

我们可以使用IIFE立即执行函数，即类似于闭包来完成该需求

    for (var i = 0, length = btnList.length; i < length; i++) {
      (function(i){
        btnList[i].onclick = function () {
          console.log(i);
        }
      })(i)
    }

使用object对象通过this指向完成

    for (var i = 0, length = btnList.length; i < length; i++) {
      var obj = btnList[i]
      obj.index = i
      obj.onclick = function () {
        console.log(this.index);
      }
    }

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>处理按钮列表JS</title>
</head>
<style>
  button {
    margin: 0 10px;
  }
</style>

<body>
  <button>点我+1</button>
  <button>点我+1</button>
  <button>点我+1</button>
  <script>
    //在我们学习JS初期，往往会遇到一个共同的问题，例如我们需要给一行的按钮同时添加一个点击时间
    //例如我们在这里进行一个小的练习，例如添加一个时间，打印它是第几个按钮 
    var btnList = document.getElementsByTagName('button')
    //这里为什么不用btnList.length 后面会进行其他说明
    //但是我们会发现，通过下面的代码好像看似没有问题，但是没法达到我们的需求，因此需要做出相应的修改  
    // for(var i =0,length = btnList.length;i<length;i++){
    //   btnList[i].onclick=function(){
    //     console.log(i);
    //   }
    // }
    // for(let i =0,length = btnList.length;i<length;i++){
    //   btnList[i].onclick=function(){
    //     console.log(i);
    //   }
    // }
    // for (var i = 0, length = btnList.length; i < length; i++) {
    //   (function(i){
    //     btnList[i].onclick = function () {
    //       console.log(i);
    //     }
    //   })(i)
    // }
    for (var i = 0, length = btnList.length; i < length; i++) {
      var obj = btnList[i]
      obj.index = i
      obj.onclick = function () {
        console.log(this.index);
      }
    }
  </script>
</body>
</html>