Javascript에서의 Event와 Event처리하기

JavaScript에서 함수를 만드는데, 이런 함수를 바로 호출하고 싶을 때가 있을 것이고, 

어떠한 사건(이벤트)이 발생하면 그 함수가 실행되도록 하고 싶기도 할 것이다.

 

그런 이벤트를 처리하는 것을 Javascript에서는 어떻게 구현할까?

객체.addEventListener("이벤트 타입", 해당하는 함수); 라는 것이 있다.

예를 들어, 아래와 같은 코드가 있다고 해보자.

function handleResize() {
    console.log("사이즈가 변경되었어요!")
}
window.addEventListener("resize", handleResize);

 

이것은 "resize"라는 이벤트가 발생했을 때까지, handleResize라는 함수를 기다리겠다는 뜻이다.

우리가 앞서 함수 등을 호출할 땐, '(괄호)'를 써서 호출하였는데, 이것은 그냥 함수의 이름만 적는다는 것이 특징이다.

그럼 실제로, '함수()' 처럼 괄호를 붙인다면, 어떤 일이 일어날까?

function handleResize() {
    console.log("사이즈가 변경되었어요!")
}
window.addEventListener("resize", handleResize()); // handleResize() 로 바꿔봤다.

handleResize()로 했을 때

이렇게 써버리면, 바로 함수가 호출되어버려서, 'resize' 라는 이벤트가 발생하지 않았는데도 불구하고, 

handleResize() 함수를 바로 호출해버리는 결과를 낳았다. 

즉, 기다리지 않고 바로 그냥 해당함수를 호출해버렸다.

 

정상적으로 우리의 의도대로 resize이벤트가 발생할 때 까지는 함수를 기다려보자.

handleResize로 했을 때

윈도우 객체를 늘였다 줄였다 하면,( 크기를 변화시키면) 해당 이벤트가 발생했으므로, 그제서야

'handleResize' 함수를 호출하였다.

 

 

그러면 click 이벤트가 발생했을 때, 제목의 색깔을 바꾸는 기능을 구현해보자.

 

const title = document.querySelector("#title");

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

클릭 하면 파란색으로 제목이 변한다.

 

※ querySelector는 노드의 첫 번째 자식을 반환한다. 보통 JS에서 요소를 불러올 땐, 이 기능을 자주 사용한다. querySelector(selector)에서 selector를 가져오기 위해서는 css에서 불러오는 것처럼 id값은 '#'으로 class 값은 '.' 으로 불러온다.