자바스크립트 콜백함수 주의할 점

만약 이벤트 리스너를 호출했다고 했을 떄

 

 

const countEvent = (valueForCalc)=> {

  countCalc(valueForCalc);

  $count.textContent = count;

}

 

이렇게 있을 때

 

  $h1.addEventListener('click', countEvent(1));

이렇게 추가하면 안됨. 이거는 그냥 함수를 호출한 거임.

 

 

let count = 0;

const countEvent = (e)=> {

  countCalc(e.currentTarget.countValue);

  $count.textContent = count;

}

$h1.countValue = 1;

$plusBtn.countValue = 1;

$minusBtn.countValue = -1;

$addEventBtn.addEventListener('click', ()=>{

  $h1.addEventListener('click', countEvent);

  $plusBtn.addEventListener('click', countEvent);

  $minusBtn.addEventListener('click', countEvent);

});

$removeEventBtn.addEventListener('click', ()=>{

  $h1.removeEventListener('click', countEvent);

  $plusBtn.removeEventListener('click', countEvent);

  $minusBtn.removeEventListener('click', countEvent);

});

function countCalc(valueForCalc){

  if( count + valueForCalc > MAX || count + valueForCalc < MIN){

    return;

  }

  count = count + valueForCalc;

}

결국 콜백함수를 이벤트로써 쓸 때는 인자를 event 인자를 받을 수 밖에 없다.

 

그럴 땐 그냥 위 처럼 임의의 필드를 만들어서 값을 지정해주고, 활용해 주면된다.

$h1.countValue = 1;

이렇게 하면, 그냥 countValue라는 필드가 생기고 거기에 1 이라는 값이 들어간다.

 

이 값에 접근할 때는

e.currentTarget.필드이름

이렇게 접근한다.

const countEvent = (e)=> {

  countCalc(e.currentTarget.countValue);

  $count.textContent = count;

}