JavaScript _ addEventListener Callback함수에 파라미터 넘기기

세상 긴 제목과 그렇지 않은 내용.

 

JavaScript에서 addEventListener를 사용할 경우...

이런 식으로 사용하는 경우가 많다.

즉 addEventListener의 첫 번째 인자로 해당 event를,

두 번째 인자로 이벤트 발생 시 실행될 함수를 적어주는 것.

 

그런데 만약, 요 두번째 함수(콜백 함수)에 파라미터를 넘겨야 한다면?

이렇게 써주면 당연히 안된다. 왜?

→ 이러면 JS 파일을 읽어내려가는 순간 imgDragStart()란 함수가 실행되고 말 테니까!

우리가 원하는 건 touchstart라는 이벤트가 발생됐을 때 imgDragStart함수가 실행되는 것.

 

따라서 함수 실행을 잠시 미뤄야 한다 === 화살표 함수를 통해 가능!

쨔잔. 이렇게 써주면 된다.

 

 

그런데 이렇게만 하면... 제일 처음 작성했던 함수와 별반 다를 게 없다!!!

우리가 원하는 건 파라미터를 넘겨주는 거니까...

이러면 당연히 num이라는 문자열이 imgDragStart 함수로 잘 넘어간다.

 

대망의 진짜 문제!

addEventListener를 사용할 땐... 해당 이벤트 객체(e)를 사용하는 경우가 굉장히 많다!

 

첫 번째 방법으로 함수를 작성했을 땐

콜백 함수에 그냥 e라는 파라미터를 받은 후 함수 내부에서 사용하면 됐었는데...

이 경우에는 당연히 통하지 않는다. 그럼 어쩌면 좋을까?

화살표 함수 내부에서 event 객체를 전달해준 뒤, 콜백 함수에도 이를 전달해주면 된다!

물론 콜백 함수에서도 전달받는 값으로 event와 해당 파라미터를 명시해줘야 한다.