자바스크립트 addEventListener 콜백함수등록

콜백함수란 인자로 함수를 전달하여 전달받음 함수를 실행하는 과정이라고 이해할 수 있습니다.

addEventListener 또한 콜백함수를 넘겨줘야 합니다.

 

document.addEventListener('click',OnClick);

위의 코드처럼 OnClick은 함수의 이름입니다. 이것은 즉, 함수를 실행시키는 것이 아닌 넘긴다는 것을 의미합니다. 만약 OnClick()과 같이 작성하였다면 함수를 실행하라는 뜻이지 매개변수로 넘기라는 뜻이 아닙니다.

 

그렇다면 매개변수가 있는 콜백 함수는 어떻게 넘겨야 할까요?

 

function confirm(name){
    console.log('hello',name);
}

document.addEventListener('click',confirm('taejin'));

탭과 스크롤을 제외한 영역을 클릭했을 때 이름과 함께 hello + name 형태로 콘솔에 출력한다고 합시다.

 

결과는 클릭도 안했는데 출력이 됩니다. 이 경우에는 arrow funtion으로 해결하면 되겠습니다.

 

function confirm(name){
    console.log('hello',name);
}

document.addEventListener('click',()=>{confirm('taejin')});