JS中for循环绑定事件

在网页中有五个按钮，需求为：点击按钮，将按钮的索引值输出。

初学JS时遇到的问题，今天学习bind方法时又想起来了，分享一下。

先看一下代码

  var btns = document.querySelectorAll('button')
    for (var i = 0; i < btns.length; i++) {
    	btns[i].onclick = function () {
    		  console.log(i)
    	 }
    }

此段代码，先是获取到所有的按钮，然后用for循环依次给每个按钮绑定点击事件。点击按钮之后，响应的i会被输出，也就是输出索引值。

真是的是这样吗？？当然不是。不论点击那个按钮，输出的结果都为 5。

因为JS中点击事件为异步函数，JS会先执行那些非异步函数（同步函数）。那么，也就是说，for循环和先循环五次，给每个按钮绑定了点击事件。注意了，绑定点击事件的时候并不会执行点击事件，而是会等待点击事件触发时才执行。也就是说，当我们点击按钮，触发点击事件的时候，for循环已经进行了五次，i = 5，所以每个按钮输出的结果均为 5.

想修改正确，其实很简单。
在绑定点击事件的上一行，加上这句话即可，手动给按钮添加一个索引

        btns[i].index = i;

在输出时，加上这句话即可输出对应的索引。

        console.log(this.index)