ループしているいくつかの要素にイベントリスナーを追加していますが、イベント関数でインデックスを保持するためにクロージャーが必要です。
<button>solution 1</button>
<button>solution 2</button>
<script>
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < 3; i++) {
var log = (function closure(number) {
return function () {
console.log(number);
};
})(i);
buttons[0].addEventListener("click", log);
}
for (var i = 0, len = 3; i < len; i++) {
(function (i) {
var log = function () {
console.log(i);
};
buttons[1].addEventListener("click", log);
})(i);
}
</script>
これらのソリューションはどちらも 0、1、2 を正しく出力します (クロージャーなしで何が起こるかを確認するには、「間違って」試してください)。
それを行う正しい方法はどれですか?