Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers)

1. Event란? 

- JavaScript는 단지 HTML과 CSS를 수정하기 위한 스크립트 언어가 아니라 이벤트에 대응하기 위해 만들어진 언어이다. 

- 이벤트란, 웹사이트에서 발생하는 모든 것(사건)을 의미한다. ex) 클릭, 새로고침, 닫기, 버튼입력, 제출(submit), etc.

- JavaScript를 사용하면 웹사이트에서 발생하는 이벤트 상황을 control 할 수 있다. ex) 새창이 열리기 전/후, 버튼 클릭 후, etc.

 

 

Window 이벤트

- 윈도우 이벤트는 웹사이트 내부에서 발생하는 것이 아니라, 윈도우 환경 자체에서 발생하는 이벤트를 말한다. 예를 들어, 브라우저 창의 사이즈를 조절하거나 브라우저를 최소화 하거나 닫는 경우 등이 존재한다. 

- 예시로 브라우저 창의 사이즈를 조절할 때, JS를 이용하여 알림창을 뜨게 만들어보자. 

 

 

[JS 코드]

function handleResize() {
    console.alert("Resizing the browser!!!!! ");
}

window.addEventListener("resize", handleResize);

 

- addEventListener()는 특정 이벤트에 대해 어떻게 처리할 것인지 미리 등록하는 기능이다. 

- 즉, window.addEventListener()는 윈도우에서 발생하는 이벤트를 처리하겠다는 의미다. 

- addEventListener()는 특정 이벤트를 지정하는 매개변수와 해당 이벤트를 처리하기 위한 함수를 매개변수로 사용한다. 

- 그러므로 window.addEventListener("resize", handleResize);는  window에서 resize 이벤트가 발생하면 handleResize라는 함수를 사용해라는 의미다. 

 

* 왜 handleResize()가 아니라 handleResize 일까? 분명 함수를 매개변수로 받는데 왜 괄호가 없는걸까? 

- 괄호가 존재하는 함수의 의미는 지금 당장 해당함수를 호출하라는 의미이다. 반대로, 괄호가 없는 함수는 해당 함수가 필요할 때 호출하라는 의미이다. 위의 예시에서는 resize이벤트가 발생했을 때, handleResize 함수가 필요한 것이다. 그러므로, 괄호 없이 사용해야만 한다. 

 

 

[출력 결과]

 

* 눈에는 보이지 않지만, JS 내부적으로 이벤트가 발생하면 이벤트 객체를 기반으로 개발자가 원하는 특정 이벤트가 무엇인지 판별하는 메카니즘이 동작한다. 이벤트가 발생하면 이벤트 객체에는 어떤 내용이 들어있는지 확인해보자. 

 

event 객체 확인

- event 객체는 다음과 같은 방법으로 확인할 수 있다.

 

 

[JS 코드]

function handleResize(event) { // event 객체는 JS로부터 생성되는 객체이다. 
  console.log(event);
}

window.addEventListener("resize", handleResize);

 

 

[출력화면]

- 브라우저 창의 크기를 조정할 때마다, 이벤트 로그가 발생하는 것을 확인할 수 있다. 

- 발생하는 이벤트가 갖고 있는 정보를 확인할 수 있다. 

 

 

Document Object 이벤트

- 이번에 설명할 이벤트는 Window이벤트와 반대로 웹페이지 자체에서 발생하는 이벤트를 의미한다. 

- 이전에 만들어 놓은 title 객체를 이용하여 해당 객체를 클릭하면 글자색이 파란색으로 변경되는 이벤트를 만들어보자. 

 

 

[JS 코드]

const title = document.querySelector("#title"); // 타이틀은 id속성값이기 때문에 #을 이용해 표현
title.innerHTML = "This is JAVASCRIPT!!!! ";
title.style.color = "white";

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

title.addEventListener("click", handleClick);

 

 

[출력화면]