addEventListener 绑定的方法传入参数不对

Question

触发click方法的时候k的取值总是heart_group.length+1，我想要每次绑定的时候k分别等于循环中的参数

 for(k=0;k<heart_group.length;k++){
                heart_group[k].addEventListener("click",function(){                                        
                    clickHeart(k);
                });

Answer 1

其原因主要是，es5中没有块级作用域，整个循环结束后，k的值为length，可以通过下面三种方法解决

//法1——闭包
for (k = 0; k < heart_group.length; k++) {
    heart_group[k].addEventListener("click", (function(k) {
        return function() {
            clickHeart(k);
        }
    })(k), false);
}
//法2——bind方法
for (k = 0; k < heart_group.length; k++) {
    heart_group[k].addEventListener("click", function() {
        clickHeart(k);
    }.bind(heart_group[k]),false);
}
//法3——对象属性
for (k = 0; k < heart_group.length; k++) {
    heart_group[k].index = k;
    heart_group[k].addEventListener("click", function() {
        clickHeart(this.k);
    },false);
}

Answer 2

k前面加let

for(let k=0;k<heart_group.length;k++){
    heart_group[k].addEventListener("click",function(){                                        
        clickHeart(k);
    });
}