for循环中的点击事件函数异步过程如何解析
请教各位 以下代码是如何执行的，只知道是异步过程，alert为什么会弹出5，而不是点击哪个btn显示哪个btn的下标，想得到详细的解释
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert(i)
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
<script>
var btns = document.querySelectorAll("button")
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.dir(event.target.innerText);
}
}
</script>
</body>
</html>
for循环执行很快，事件监听时间实际是一个中断，你点击的时候，循环已经执行完毕，i在内存中已经是5了，所以永远会是5。
可以用以上代码实现你要的效果
你现在获取的是button标签，每次循环都会为button添加监听点击事件，会把上次的覆盖掉，因为你没有为每个button添加唯一标识，所以最后只剩下alert为5的函数
for循环是同步事件，点击是一个异步的过程,点击的时候,for循环已经循环完，i=5