JavaScript onkeydown 이벤트란?
onkeydown 이벤트는 사용자가 키보드의 키를 누르는 순간 발생하는 이벤트입니다. 입력 필드에서 타이핑할 때마다 실시간으로 반응해야 하는 기능, 예를 들어 검색 자동완성, 입력값 유효성 검사, 단축키 처리 등을 구현할 때 유용하게 활용됩니다.
참고로 키를 누르고 있는 동안에는 onkeydown 이벤트가 운영체제의 키 반복 설정에 따라 계속해서 여러 번 발생할 수 있으며, 일반적인 키 입력 흐름은 keydown → keypress → keyup 순서로 진행됩니다.
기본 사용 예제
아래 예제 코드를 직접 실행해 보면, 텍스트 입력 상자 안에서 아무 키나 눌렀을 때 경고 창이 나타나는 것을 확인할 수 있습니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("A key is pressed.")
}
//-->
</script>
</head>
<body>
<input type = "text" onkeydown = "sayHello()">
</body>
</html>어떤 키가 눌렸는지 확인하기
이벤트 핸들러에 event 객체를 전달하면 눌린 키의 정보를 얻을 수 있습니다. 최신 브라우저에서는 event.key 속성을 사용하는 것이 권장되며, 구형 코드에서는 event.keyCode가 사용되기도 했습니다.
<input type="text" onkeydown="showKey(event)">
<script>
function showKey(event) {
console.log("눌린 키: " + event.key);
}
</script>정리
onkeydown 이벤트는 키 입력에 즉시 반응해야 하는 인터랙티브한 웹 페이지를 만들 때 필수적인 요소입니다. HTML 요소에 인라인 속성으로 직접 연결하거나, addEventListener('keydown', ...) 방식으로 등록할 수도 있습니다.