[JavaScript] closure을 사용한 addEventListner for문

addEventListner을 반복해서 button에 달아야 할 때가 발생했는데, 엄청난 문제점을 발견했고 새로 알게된 사실을 정리하려고 한다. 

 

112 추가한다.

이렇게 하면 되는데? 원하는 답은 아니지만, 문제가 없다는 걸 알 수 있다.

 

var tmp00 = new Item(list);
tmp00.btn.addEventListener('click', function() {clickButton(tmp00)});
items[0] = tmp00;
var tmp01 = new Item(list);
tmp01.btn.addEventListener('click', function() {clickButton(tmp01)});
items[1] = tmp01;
var tmp02 = new Item(list);
tmp02.btn.addEventListener('click', function() {clickButton(tmp02)});
items[2] = tmp02;

See the Pen jOVErJX by mooyoung2309 (@mooyoung2309) on CodePen.

 

 

 

 

그냥 for문을 사용한다. (오답)

눌러보면 어떤 버튼을 눌러도 마지막 버튼만 동작하는걸 확인할 수 있다. 진짜 화가났다.

 

for(var i=0; i<3; i++) {
    var tmp = new Item(list);
    tmp.btn.addEventListener('click', function() {clickButton(tmp)});
    items[i] = tmp;
}

See the Pen test-addEventListner02 by mooyoung2309 (@mooyoung2309) on CodePen.

 

 

 

 

for문, 클로저(Closure)를 사용한다. (정답)

클로저가 뭔지는 공부를 하고나서 정리하고, 일단 대충 함수안에 넣는 것 같다. 따라서 해봤더니 됐다.

 

for(var i=0; i<3; i++) {
  (function() {
    var tmp = new Item(list);
    tmp.btn.addEventListener('click', function() {clickButton(tmp)});
    items[i] = tmp;
  })();
}

See the Pen test-addEventListner01 by mooyoung2309 (@mooyoung2309) on CodePen.