JS 복습하기-8 (Event, Handler)

오늘은 JS의 Event와 Handler에 대해서 알아보겠다.

 

먼저 코드를 보자.

function handleResize() {
    console.log("I have been resize");
}

window.addEventListener("resize", handleResize);

위의 함수는 window가 resize가 될때 불리게 되는 handler를 만든 것이다.

여기서 우리는 주목해야 하는 부분이 있다.

window.addEventListener("resize", handleResize);
window.addEventListener("resize", handleResize());

이 둘의 차이점은 무었일까?

handleResize()로 작성을 하게 되면 맨 처음 웹 페이지를 오픈했을 때 해당 함수가 자동으로 호출 되게 된다.

반면, handleResize로 ()없이 작성을 하게 되면 처음에는 호출되지 않고 Event가 발생할 때만 호출이 된다는 차이점이 있다.

과거 웹 프로그래밍 수업 과제를 할 때 "왜 함수를 부르지 않았는데 호출되지..?" 했었을 때도 자주 있었던 일이기에 더욱 주의해서 봐야 하는 부분이다.

 

간단하게 title을 클릭했을 때 색상을 바꾸는 코드를 작성해 보았다.

function handleClick() {
    title.style.color = "blue";
}

title.addEventListener("click", handleClick);