[자바스크립트] addEventListener의 두번째 인자로 왜 함수 실행이 아닌 함수 자체를 가질까?

addEventListener의 두번째 인자로 왜 함수 실행이 아닌 함수 자체를 가질까?

addEventListener는 두번째 인자로 어떤 이벤트가 발생했을때 실행할 함수를 가진다. (이벤트가 동작한 후에 실행할 함수를 인자로 가짐)

 

❌ 틀린 코드

1. addEventListener의 두번째 인자에 함수 호출을 가지게 될 경우:

이벤트가 발생했을때 함수가 실행되어 리턴값을 addEventListener의 두번째 인자값으로 가지게 된다.

window.addEventListener('click', offEditMode());

 

✅ 올바른 코드

2. addEventListener의 두번째 인자에 콜백 함수 안에 함수 호출 or 함수 자체를 가지게 될 경우:

콜백함수안에 원하는 함수를 호출하거나 함수자체를 인자로 넘겨주어 이벤트가 실행된 후 함수가 실행할 수 있도록 해준다.

window.addEventListener('click', () => {
  this.offEditMode();
});