【笔记】JS遍历按钮并添加点击事件

发表于 更新于 阅读次数：

前言

JS遍历按钮并添加点击事件时，可能会因为var定义的变量的作用域问题，导致运行结果超出预期
如果为了兼容ES5，仍然使用var定义变量，可以使用立即执行函数划分变量作用域
如果使用ES6，可以直接使用let定义变量，则变量的作用域被自动划分

支持ES5的浏览器使用立即执行函数

1
2
3
4
5
6
7
8
9
10
var btnList = document.querySelectorAll('button');

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

支持ES6的浏览器直接使用let

1
2
3
4
5
6
7
var btnList = document.querySelectorAll('button');

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

完成