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. 마우스 이벤트

이벤트	설명
click	해당 요소를 클릭했을 때 실행된다.
dbclick	해당 요소에서 마우스 버튼을 더블 클릭했을 때 실행된다.
mousedown	해당 요소에서 마우스 버튼을 눌렀을 때 실행된다.
mouseup	해당 요소에서 눌렀던 마우스 버튼을 떼었을 때 실행된다.
mousemove	해당 요소에서 마우스를 움직였을 때 실행된다.
mouseover	마우스 커서를 HTML 요소 바깥에서 안으로 이동했을 때 실행된다.
(버블링이 발생한다.)
mouseenter	마우스 커서를 HTML 요소 바깥에서 안으로 이동했을 때 실행된다.
(버블링이 발생하지 않는다.)
mouseout	마우스 커서를 HTML 요소 안에서 바깥으로 이동했을 때 실행된다.
(버블링이 발생한다.)
mouseleave	마우스 커서를 HTML 요소 안에서 바깥으로 이동했을 때 실행된다.
(버블링이 발생하지 않는다.)
contextmenu	마우스 오른쪽 버튼을 눌렀을 때 실행된다.

어떤 element에 click 이벤트가 발생하면 동시에 mousedown, mouseup 이벤트도 발생한다. 사용자가 마우스를 누르면 mousedown 이벤트가 발생하고, 떼면 mouseup 이벤트가 발생하고, 동시에 click 이벤트도 발생한다.

아래는 mousedown, mouseup의 예제이다.

<div class='box'></div>
<input class='btn_clear' type='button' value='clear'>
<div class='result'></div>

.box {
    background: yellow;
    height: 200px;
    width: 200px;
}

밑에는 JavaScript 코드이다.

const div = document.querySelector('.box');
const btnClear = document.querySelector('.btn_clear');
const result = document.querySelector('.result');

div.addEventListener('click', (event) => {
    result.innerHTML+= '<div>click</div>';
});

div.addEventListener('mousedown', (event) => {
    result.innerHTML+= '<div>mousedown</div>';
});

div.addEventListener('mouseup', (event) => {
    result.innerHTML+= '<div>mouseup</div>';
});

btnClear.addEventListener('click', (event) => {
    result.innerHTML= '';
});

위 예제의 노란색 <div> 안에는 click, mousedown, mouseup 이벤트가 적용되어 있다. 여기서 노란색 <div>를 클릭하면 mousedown, mouseup, click 이벤트가 순서대로 발생하는 것을 확인할 수 있다. 노란색 <div> 안에서 마우스를 누르고, 마우스를 움직여서 노란색 <div> 밖에서 마우스를 떼면 mouseup, click 이벤트는 발생하지 않고 mousedown 이벤트만 발생한다. 반대로 노란색 <div> 밖에서 마우스를 누르고 마우스를 움직여서 노란색 <div> 안에서 마우스를 떼면 mousedown, click 이벤트는 발생하지 않고 mouseup 이벤트만 발생한다. 예제코드로 실행해보며 이해하는 것이 빠르니 상단에 있는 GitHub 링크에 접속해 예제코드를 꼭 실행해보기 바란다.

13-1-2-2. 키보드 이벤트

이벤트	설명
keydown	키를 눌렀을 때 실행되며 누르고 있을 때, 입력될 때도 실행된다.
keyup	키보드의 키를 눌렀다가 떼었을 때 실행된다.
keypress	키를 눌렀을 때 실행된다. 예전에는 사용되었으나, 브라우저에 따라 아시아권의 문자를 처리하지 못해서 더 이상 사용되지 않는다.

아래의 코드는 input에 keydown, keyup 이벤트를 등록하고 해당 이벤트가 발생하면 화면에 해당 이벤트 이름을 출력한다.

<input class='input' type='text'>
<input class='clear' type='button' value='clear'>
<div class='result'></div>

밑에는 JavaScript 코드이다.

const inputBox = document.querySelector('.input');
const btnClear = document.querySelector('.clear');
const result = document.querySelector('.result');

inputBox.addEventListener('keydown', () => {
    result.innerHTML += '<div>keydown</div>';
});

inputBox.addEventListener('keyup', () => {
    result.innerHTML += '<div>keyup</div>';
});

btnClear.addEventListener('click', () => {
    result.innerHTML = '';
});

13-1-2-3. 포커스 이벤트

이벤트	설명
focus	HTML 요소가 포커스를 받았을 때 실행된다. (버블링되지 않는다)
blur	HTML 요소가 포커스를 잃었을 때 실행된다. (버블링되지 않는다)
focusin	HTML 요소가 포커스를 받았을 때 실행된다. (버블링된다)
focusout	HTML 요소가 포커스를 잃었을 때 실행된다. (버블링된다)

focusin, focusout 는 뒤에서 설명할 이벤트 핸들러 등록 방식 중 addeventlistener() 방식으로 이벤트 등록해줘야 브라우저 상관없이 정상 작동한다.

아래의 코드는 input 에 blur 되었을 때, 올바른 이메일 형식인지 체크하는 경고 문구를 띄우고, focus 되었을 때, 사용자가 올바른 이메일 형식을 입력하도록 에러 메세지를 지우는 함수를 호출하는 예제이다.

아이디: <input type="email" id="input">
      
<div id="error"></div>

밑에는 JavaScript 코드이다.

input.onblur = function() {
    if (!input.value.includes('@')) { // @ 유무를 이용해 유효한 이메일 주소인지 확인
        input.classList.add('invalid');
        error.innerHTML = '이메일 형식이 올바르지 않습니다.';
    }
}
      
input.onfocus = function() {
    if (this.classList.contains('invalid')) {
       // 유저가 새로운 값을 입력하기위해 경고 문구를 지움
        this.classList.remove('invalid');
        error.innerHTML = "";
    }
}