[책] 자바스크립트 코드 레시피 278 - 98일차

이벤트 처리 이해하기

• 유저의 조작에 따라 이벤트를 실행하고 싶을 때

설명

웹 사이트는 클릭, 탭, 스크롤, 화면 불러오기, JSON 읽어 오기 등 다양한 이벤트가 존재하며, 자바스크립트는 클릭, 탭 등의 동작에 따른 이벤트 처리가 가능합니다. 이벤트 처리는 addEventListener() 를 사용해 제어합니다.

실습

index.html

<button class="button">클릭하기</button>

---

script.js

window.onload = () => {
  const button = document.querySelector('.button');
  button.addEventListener('click', onClickButton);
  function onClickButton() {
    console.log('클릭 이벤트가 발생하였습니다.');
  }
};

button 요소는 클릭, 탭 등 다양한 이벤트가 발생하며, 이와 같이 이벤트를 발생시키는 객체를 이벤트 타깃 이라고 합니다. window, div 요소, p 요소 등도 이벤트 타깃입니다. 앞 코드의 경우 click 이벤트이며, 이벤트는 유저 조작 관련 등 다양한 종류가 존재합니다. 타깃의 이벤트 처리를 이벤트 리스너 라고 하며, 모두 addEventListener() 와 관련이 있습니다.