方法一：使用下标实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var btns = document.getElementsByTagName("button");
for (var i=0, length=btns.length; i<length; i++) {
var btn = btns[i];
//将btn所对应的下标保存在btn上
btn.index = i;
btn.onclick = function () {
alert('第'+(this.index+1)+'个');
};
}
}
</script>
</head>
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
</html>
方法二：使用闭包实现（闭包的作用可以延长局部变量的生命周期）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var btns = document.getElementsByTagName("button");
//利用闭包实现循环遍历+监听
for (var i=0, length=btns.length; i<length; i++) {
(function(i) {
var btn = btns[i];
btn.onclick = function () {
alert('第'+(i+1)+'个');
};
})(i)
}
}
</script>
</head>
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
</html>
方法三：利用ES6实现（let有自己的块作用域）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var btns = document.getElementsByTagName("button");
//利用let定义i
for (let i=0, length=btns.length; i<length; i++) {
var btn = btns[i];
btn.onclick = function () {
alert('第'+(i+1)+'个');
};
}
}
</script>
</head>
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
</html>