키(key) 이벤트는 사용자가 키보드와 상호작용할 때마다 발생하는 이벤트입니다. JavaScript에서 주요 키 이벤트는 크게 세 가지로 나눌 수 있으며, 각각 keydown, keypress, keyup입니다.
주요 키 이벤트 종류
| 이벤트 | 설명 |
|---|---|
| onkeydown | 사용자가 키를 누르고 있는 순간 발생합니다. 키를 계속 누르고 있으면 반복해서 실행될 수 있습니다. |
| onkeypress | 사용자가 키를 눌렀을 때 발생합니다. 참고로 이 이벤트는 현재 표준에서 폐기(deprecated)되었으므로 새 프로젝트에서는 사용을 권장하지 않습니다. |
| onkeyup | 사용자가 키를 놓았을 때(누른 후 뗄 때) 발생합니다. |
세 이벤트의 발생 순서는 일반적으로 keydown → keypress → keyup 순입니다. 아래는 JavaScript에서 키 이벤트를 처리하는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Key-events in JavaScript</h1>
<div class="result"></div>
<h3>Press or release key to see the keyevent fired</h3>
<script>
let resEle = document.querySelector(".result");
document.body.addEventListener("keydown", () => {
resEle.innerHTML = "keydown event is being fired <br>";
});
document.body.addEventListener("keyup", () => {
resEle.innerHTML = "keyup event is being fired";
});
document.body.addEventListener("keypress", () => {
resEle.innerHTML += "keypress event is being fired";
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
키를 누르고 있는 동안 — keydown 이벤트가 지속적으로 발생합니다.
키를 놓았을 때 — keyup 이벤트가 발생합니다.
정리
keydown은 키 입력의 시작점을 감지할 때, keyup은 입력이 끝난 시점을 처리할 때 유용하게 사용됩니다. 특히 검색창 자동완성, 게임 조작키 처리, 단축키 구현 등 실시간으로 키보드 입력에 반응해야 하는 기능에서 이 세 가지 이벤트의 차이를 정확히 이해하고 활용하는 것이 중요합니다.