[JavaScript] 이벤트(Event)와 이벤트리스너(Event Listener)

---

이번 시간의 주제는

Event 

자바스크립트에서 아주 중요한 부분이다.

그만큼 많이 자주 쓰이기 때문이다. 

 

---

1. 이벤트(Event)

자바스크립트와 HTML은 이벤트 핸들에 의해서 서로 상호작용한다. 브라우저에 어떤 부분을 클릭하거나 마우스를 올려놓거나 키를 입력하거나 화면이 줄거나 늘 때 등등 모든 동작에 이벤트가 발생한다. 사용자가 일으키는 다양한 이벤트들을 캐치해서 자바스크립트에서 원하는 행위를 구현할 수 있다.

 

자주 쓰이는 간단한 예시를 살펴보자. 

<p>Click this document to activate the handler.</p>
<script>
  window.addEventListener("click", () => {
    console.log("You knocked?");
  });
</script>

예시와 같이 사용자가 발생시키는 여러가지 이벤들을 캐치하여 내가 원하는 함수를 실행시키게 한다. 

동작과정을 살펴보면 이렇다.

이벤트(Event): 마우스 클릭, 키보드 입력 등의 사용자의 물리적 행위
이벤트 객체(Event Object): 해당 이벤트에 대한 정보를 이벤트 리스너에게 전달
이벤트 리스너(Event Listener): 이벤트를 전달 받았을 때 실행되는 자바스크립트 코드

 

1. 이벤트 리스너(Event Listener)

작성방법

하나의 예시로 설명하고자 한다.

<div class="hello">
   <h1>Grab Me!</h1>
</div>