JS中对于for循环中点击事件的理解（通俗版）

在学习JS时遇到了一个问题，就是如果有多个按钮时，我们可以通过document.getElementByTagName（“button”）的方式来获取事件数组，在获取后我们需要监听每一个按钮是否被点击。最简单的方式就是分开写，一个按钮对应一个点击事件函数，这样虽然通俗易懂，但是这样的代码量是十分大的，既然我们获得的是一个事件的数组，为什么不用一个for循环来解决呢，于是就有了下面这一种写法（本代码是通过点击按钮实现图片的切换）：

for(var i=0; i<allLi.length; i++){
            var sLi = allLi[i];
            sLi.index = i+1;
            sLi.onclick = function () {
                box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';
            }
        }

刚开始看到这个也是一脸懵逼，因为之前一直做的是ACM，对于程序执行过程十分敏感，感觉这不合常理啊，一直不知道他这是怎么执行的，for循环执行完了以后，应该再去点击的时候就没用了啊，但是这里依旧可以，说明在JS中，事件的监听的执行不是按照严格的执行先后顺序来的，而是随时点，随时执行，这种写法只是简化了上面所提到的最直接的书写方式，通过for循环去实现后，其实和把他们展开的写法是一模一样的，但是要确定你点的究竟是哪个按钮，就要通过this来实现。

另一个就是需要通过改变其背景属性来实现背景的切换，那就是要改名字，名字要更改一个数字，但是我们不能通过i去实现，因为在for循环执行完毕后，i就变成了5，那么就无法去改变了，所以我们可以通过改变它的index属性来实现。