JS学习笔记--为同种类型控件添加事件，无法应用循环变量的解决办法

我们在对同种控件编写事件响应时一般会用到for循环来处理通过document.getElementsByClassName()获取的同一类控件，比如10个button，class名为“btnClass“。但是由于document.getElementsByClassName()不同于document.getElementById()，获取的是具有同一类名的全部控件，这样就需要遍历每一个控件来分别设置事件响应。比如我们想设计一个鼠标移入移出改变背景色的东西，如下：

 

鼠标移入变为黄色，移出恢复蓝色。

正常情况下我们可能会这样写：

var boxClass = document.getElementsByClassName("box");
for(var i = 0;i<this.boxClass.length;i++){
    boxClass[i].onmouseenter=function(){
        boxClass[i].style.background="yellow";
    }
    boxClass[i].onmouseleave=function(){
        boxClass[i].style.background="skyblue";
    }
}

这样写会导致的问题就是仅仅为最后一个控件设置了事件响应，原因是var声明的变量是全局变量，已经在事件响应触发之前就已循环完毕，即i已经循环到最后。

解决办法有两个：

1.通过let声明变量，使变量变为局部变量，如下：

var boxClass = document.getElementsByClassName("box");
for(let i = 0;i<this.boxClass.length;i++){
    boxClass[i].onmouseenter=function(){
        boxClass[i].style.background="yellow";
    }
    boxClass[i].onmouseleave=function(){
        boxClass[i].style.background="skyblue";
    }
}

2.循环内嵌套立即执行函数，将每次循环的变量值保存下来，如下：

var boxClass = document.getElementsByClassName("box");
for(var i = 0;i<this.boxClass.length;i++){
    (function(param){//形参
        boxClass[param].onmouseenter=function(){
            boxClass[param].style.background="yellow";
        }
        boxClass[param].onmouseleave=function(){
            boxClass[param].style.background="skyblue";
        }
    }(i));//实参
}