如何用for循环在JS中创建事件监听器？下拉菜单监听异常排查

这个问题我太熟啦！你遇到的是经典的循环变量作用域陷阱，咱们一步步拆解：

问题根源 #

你用var声明的i是函数级（或全局）作用域变量，整个循环里共用同一个i。当循环结束后，i的值已经变成了dropDown.length，这时候用户点击下拉按钮，事件回调里去取subNavList[i]，其实就是取subNavList[dropDown.length]——这个位置根本不存在元素，自然就失效了。而你手动给单个元素加监听时，回调里的索引是固定的，所以能正常工作。

三种解决方案 #

方案1：用let声明循环变量（最简洁，ES6+支持）

let会在每次循环时创建独立的块级作用域，每个事件回调捕获的都是当前循环的i值：

var dropDown = document.getElementsByClassName('nav-sub__mobile-dropdown');
var subNavList = document.getElementsByClassName('nav-sub__list');

// 用let代替var声明i
for (let i = 0; i < dropDown.length; i++) {
  dropDown[i].addEventListener('click', function() {
    subNavList[i].classList.toggle('active'); // 这里替换成你实际要操作的类名或逻辑
  });
}

方案2：使用立即执行函数(IIFE)闭包（兼容旧浏览器）

如果要兼容不支持ES6的环境，用IIFE把每次循环的i值封装起来，让每个回调都能拿到当前的索引：

var dropDown = document.getElementsByClassName('nav-sub__mobile-dropdown');
var subNavList = document.getElementsByClassName('nav-sub__list');

for (var i = 0; i < dropDown.length; i++) {
  // 用IIFE保存当前i的值为局部变量index
  (function(index) {
    dropDown[index].addEventListener('click', function() {
      subNavList[index].classList.toggle('active');
    });
  })(i);
}

方案3：用forEach遍历元素（更优雅）

先把HTMLCollection转成数组，再用forEach遍历，它的回调会自动绑定每个元素的独立索引：

// 把HTMLCollection转成数组（ES6方法）
var dropDown = Array.from(document.getElementsByClassName('nav-sub__mobile-dropdown'));
var subNavList = Array.from(document.getElementsByClassName('nav-sub__list'));

dropDown.forEach(function(item, index) {
  item.addEventListener('click', function() {
    subNavList[index].classList.toggle('active');
  });
});

如果不想转数组，也可以用[].forEach.call(dropDown, function(item, index) {...})直接遍历HTMLCollection。

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