[JavaScript] addEventListener callback Function이 즉시 실행된다 ?

[JavaScript] addEventListener callback Function이 즉시 실행된다 ?

 

 

EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

 

target.addEventListener(type, listener[, options])

 

 

보통 이벤트를 등록할 때 일반적으로 다음과 같이 작성한다.

 

document.getElementById('btn01').addEventListener('click', function(){
	console.log('hello~');
});

document.getElementById('btn02').addEventListener('click', function(){
	console.log('hello~');
});

document.getElementById('btn03').addEventListener('click', function(){
	console.log('hello~');
});

 

 

그런데 보통 같은 로직을 반복적으로 타야하는 경우 함수를 만들어서 사용한다.

 

document.getElementById('btn01').addEventListener('click', clickEvent);
document.getElementById('btn02').addEventListener('click', clickEvent);
document.getElementById('btn03').addEventListener('click', clickEvent);

function clickEvent(){
	console.log('hello~');
}

 

 

코드도 확 줄고 가독성도 좋죠?

 

 

 

하지만, 이 함수에 인자 값을 넣고 싶으면 이렇게 ????

 

document.getElementById('btn01').addEventListener('click', clickEvent('hello~'));
document.getElementById('btn02').addEventListener('click', clickEvent('hello~'));
document.getElementById('btn03').addEventListener('click', clickEvent('hello~'));

function clickEvent(str){
	console.log(str);
}

 

즉시실행함수를 알아도, 몰라도 가장 많이하는 실수일 것이라고 생각한다. (물론나도)

 

이렇게 구현을 할 경우 처음 페이지를 로드할 때 hello~만 잔뜩 찍고 도저히 클릭이벤트를 타질 않는다. 

 

 

 

위 코드는 아래코드처럼 이벤트 함수를 등록하면서 즉시 함수를 실행시키도록 작용한 것이다.

 

document.getElementById('btn01').addEventListener('click', function(str){
	console.log(str);
}());

 

 

단지 인자를 넘기기위해 수정한 것 뿐인데 순간적으로 왜 이럴까 도통 이유를 알 수없었던 것이 참 재밌다.