目的:为每一个 button 添加点击事件,打印其对应的索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环添加事件</title>
</head>
<body>
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
</body>
</html>
错误示例,因为 var 是全局变量,后续每个 button 打印的都是“当前索引值为3”
<script>
var aButtons = document.querySelectorAll('button')
// 错误示例,因为 var 是全局变量,后续每个 button 打印的都是“当前索引值为3”
for (var i = 0; i < aButtons.length; i++) {
aButtons.onclick = function () {
console.log(`当前索引值为${i}`)
}
}
</script>
方法一:基于闭包思想来完成,函数自调用
<script>
var aButtons = document.querySelectorAll('button')
for (var i = 0; i < aButtons.length; i++) {
(function (i) {
aButtons.onclick = function () {
console.log(`当前索引值为${i}`)
}
}(i))
}
</script>
方法二:基于闭包思想来完成,函数自调用,再返回新的函数
<script>
var aButtons = document.querySelectorAll('button')
for (var i = 0; i < aButtons.length; i++) {
aButtons.onclick = (function (i) {
return function () {
console.log(`当前索引值为${i}`)
}
})(i)
}
</script>
方法三:基于ES6的let关键字
<script>
var aButtons = document.querySelectorAll('button')
for (let i = 0; i < aButtons.length; i++) {
aButtons.onclick = function () {
console.log(`当前索引值为${i}`)
}
}
</script>
方法四:添加自定义属性
<script>
var aButtons = document.querySelectorAll('button')
for (var i = 0; i < aButtons.length; i++) {
aButtons[i].myIndex = i
aButtons.onclick = function () {
console.log(`当前索引值为${this.myIndex}`)
}
}
</script>
方法五:通过事件委托来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环添加事件</title>
</head>
<body>
<button index="1">按钮一</button>
<button index="2">按钮二</button>
<button index="3">按钮三</button>
</body>
<script>
document.body.onclick = function (e) {
var buttonDom = e.srcElement || e.target;
var index = buttonDom.getAttribute('index')
console.log(index)
}
</script>
</html>