JavaScript의 addEventListener() 란?

function handleResize(){
    console.log("I have been resized");
}
 
window.addEventListener("resize", handleResize);

 

window 객체 안에 내장되어 있는 addEventListener()라는 함수에 대해 알아보자.

 

첫 번째 인자는 이벤트 명이다. 

두 번째 인자는 콜백 함수이다. 첫 번째 인자의 이벤트가 발생하면 실행된다. 

 

따라서 위의 코드는 윈도우 창의 크기를 변경할때마다 handleResize 함수를 실행하는 것이다.

 

addEventListener()함수는 말그대로 이벤트를 받기를 기다리고 있는 중이다.

어떠한 이벤트인지 개발자가 첫 번째 인자에 알려줘야 한다.

이때 중요한것은 두번째 인자인 함수에는 ()를 작성하지 말아야 한다!

 

()를 안 쓸때 : 내가 필요한 시점에 handleResize 함수를 호출한다. -> 이벤트가 발생될 때

()를 쓸 때 : window가 호출되는 즉시! 호출된다.