如何在事件监听器中传递for循环计数器至命名函数？

下面提供几种可行的方案，不用匿名函数也能实现需求：

• 使用bind()绑定参数
  利用Function.prototype.bind()给命名函数预先绑定计数器值，触发事件时就能拿到对应的索引：

  function addKeys(){
      for(let i = 0; i < keys.length; i++){
          // 把i作为第一个参数绑定到testing函数，null表示this指向不变
          keys[i].addEventListener("click", testing.bind(null, i))
      }
  }
  
  // 调整函数参数顺序，先接收索引i，再接收事件对象e
  function testing(i, e){
      console.log(e)
      console.log(i) // 这里能正确输出当前元素的循环索引
  }
  

• 利用元素自定义属性存储索引
  把计数器值存在元素的自定义data-*属性中，点击时从事件目标读取：

  function addKeys(){
      for(let i = 0; i < keys.length; i++){
          keys[i].dataset.index = i; // 将索引存入元素的data-index属性
          keys[i].addEventListener("click", testing)
      }
  }
  
  function testing(e){
      console.log(e)
      // 读取并转为数字类型
      const i = parseInt(e.target.dataset.index, 10);
      console.log(i)
  }
  

• 闭包包裹命名函数
  通过立即执行函数（IIFE）封闭每个循环迭代的索引作用域，返回调用命名函数的包装函数：

  function addKeys(){
      for(let i = 0; i < keys.length; i++){
          keys[i].addEventListener("click", (function(index) {
              return function(e) {
                  testing(e, index); // 调用命名函数，传入事件和索引
              };
          })(i));
      }
  }
  
  function testing(e, i){
      console.log(e)
      console.log(i)
  }
  

内容的提问来源于stack exchange，提问作者Dawn