1. 이벤트의 개념

1.1. 이벤트란?

이벤트의 사전적 의미는 사건으로, 어떠한 사건이 발생했다는 것을 의미합니다. 웹 페이지에서 마우스 클릭을 하거나 키보드를 누르고, 화면 크기를 조절하는 사건이 발생했을 때 웹 페이지는 그에 맞는 동작을 합니다.

이벤트 발생 시 지정된 동작을 하도록 자바스크립트(JavaScript)를 통해 이벤트를 다루는 것을 이벤트 핸들링(Event Handling)이라고 하고 이벤트를 전달받아 일어나야 하는 구체적인 동작을 코드로 구현하고, 이를 등록해 실행할 수 있는데 이를 이벤트 핸들러(Event Handler)라고 합니다. 자세한 내용을 뒤에 다루도록 하고, 먼저 간단한 클릭 이벤트 예시를 살펴보도록 하겠습니다.

<!DOCTYPE html>
<html>
    <body>
        <button id="myBtn">클릭하세요!</button>
        <script>
            const btn = document.querySelector('#myBtn');
            btn.onclick = function(){ 
                alert('안녕!');
            }
        </script>
    </body>
</html>

Untitled

2. 이벤트 타입

2.1. 이벤트의 타입의 정의

브라우저에서는 수많은 이벤트를 발생시킬 수 있습니다. 우리의 일상생활 중 생기는 사건처럼 많은 이벤트가 있으며 또한 적용 방식도 다양한 종류가 있습니다. 키보드, 마우스, HTMLDOM, window객체 등 처리하는 이벤트는 폭 넓게 제공되고 있으며, 각 파트마다 요소가 다양합니다.

Untitled (21).png

2.2. 키보드 이벤트

키보드 이벤트(Keyboard Event)는 사용자가 키보드의 키를 누르거나, 키를 땠을 때 발생하는 이벤트 입니다. 키를 누를 때 keydown 이 발생하며, 키를 놓을 때는 keyup 타입의 이벤트가 발생됩니다. 그리고 keypress 타입은 현재 권장되지 않는 타입 입니다.

해당 이벤트를 순서대로 나열한 표 입니다.

이벤트	설명
`keydown`	유저가 처음 키를 눌렀을 때
`keyup`	유저가 키를 뗄 때
`keypress`	유저가 눌렀던 키의 문자가 입력을 됐을 때

<aside> 💡 keydown 과 keypress 의 차이

keydown과 keypress 는 키를 누를 때 실행이 됨을 표에서 알 수 있습니다. 하지만 이론적으로 다가가 보자면 keydown 이벤트는 키를 누르거나 해제 된 키를 나타내며 keypress 이벤트는 입력 중이었던 문자를 나타냅니다.

그리고 keydown은 모든 문자를 인식하지만, keypress는 한글을 인식하지 않습니다.

</aside>