方法一：使用下標實現
<!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>
