13-1. 이벤트

이벤트 작동 방식의 이해를 돕기 위해서 예제 코드를 첨부하므로 실행해보기를 바란다.

GitHub - charile1/js_book_example

13-1-1. 이벤트(event)란?

이벤트는 시스템에서 발생하는 작업 또는 사건을 말한다. 특정 버튼을 클릭하거나 DOM 로드가 완료되는 등의 이벤가 발생하면 브라우저는 이와 같은 이벤트를 감지할 수 있다. 시스템은 이벤트가 발생할 때 일종의 신호를 생성하고 작성된 코드를 실행시킨다. 예를 들어 횡단보도에서 신호등이 빨간 불에서 초록 불로 바뀌고 이 신호가 보행자들에게 전달되면 신호를 전달받은 보행자들은 안전하게 횡단보도를  건널 수 있다. 마찬가지로 사용자가 키보드의 키를 눌렀을 때 함수를 호출해서 어떤 로직을 처리하고 싶다고 가정하자. 이 때, 브라우저는 사용자의 키보드 누름을 감지하고 이벤트를 발생시킬 수 있다. 그래서 이 특정 키를 누른 이벤트가 발생하면 특정 함수를 호출하도록 브라우저에 위임할 수 있다.

간단한 예시로 button 이 눌렸을 때, 배경이 임의의 색상으로 변경되는 코드를 보자.

<button>색깔 바꾸기</button>

JavaScript 코드는 다음과 같다.

const button = document.querySelector('button');

function randomNumber(num) {
    return Math.floor(Math.random() * (num+1));
}

button.addEventListener('click', () => {
    const randomColor = `rgb(${randomNumber(255)}, ${randomNumber(255)}, ${randomNumber(255)})`;
	  document.body.style.backgroundColor = randomColor;
});

<button>요소에는 사용자가 버튼을 클릭할 때 발생하는 이벤트가 있다. 나중에 설명하겠지만 이벤트를 등록하는 메서드 addEventListener() 를 통해 이벤트 이름과 이벤트를 처리하는 함수가 전달된다. 그래서 사용자는 버튼의 addEventListener() 메서드를 호출하여 'click' 이벤트와 이벤트가 발생했을 때 호출하는 함수인 임의의 RGB 색상을 생성하는 함수를 전달해서 버튼이 눌릴 때마다 해당 이벤트를 감지하여 함수를 호출한다.

13-1-2.이벤트 타입

이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 웹 브라우저에는 약 200여 가지의 이벤트 종류가 있고 이벤트를 모두 설명할 수 없다. 모든 이벤트와 이벤트 객체의 속성을 공부할 수 없음으로 사용 빈도가 높은 이벤트 정도만 알아두자. 아래 설명되는 이벤트 캡처링과 버블링은 13-4 챕터에서 설명한다.

13-1-2-1. 마우스 이벤트