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);

}