【笔记】JS实现监听一组按钮的点击事件

发表于 更新于 阅读次数：

前言

JS实现监听一组按钮的点击事件

ES5

通过为对象中定义一个属性来存放当前索引

1
2
3
4
5
6
7
8
9
const btnElementList = document.getElementsByTagName("button");

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

通过闭包来传递当前索引

1
2
3
4
5
6
7
8
9
10
const btnElementList = document.getElementsByTagName("button");

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

ES6

通过let定义具有作用域的索引

1
2
3
4
5
6
7
8
const btnElementList = document.getElementsByTagName("button");

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

完成