왕진 블로그
반응형
Web Development · JavaScript
JavaScript 키 이벤트
이벤트의 기본 개념부터 e.key, e.code, 방향키로 3x3 셀을 이동하는 예제까지 정리합니다.
시작 오늘 분석할 코드
이 예제는 사용자의 키보드 입력이 브라우저 이벤트로 전달되고, JavaScript가 그 값을 읽어 화면을 바꾸는 흐름을 보여줍니다. 단순히 어떤 키가 눌렸는지 출력하는 예제와 방향키로 표의 선택 셀을 움직이는 응용 예제가 함께 들어 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트가 뭐지</title> </head> <body> <h3>이벤트는 언제 발생하는 거야?</h3> <hr> <div> <img style="float:left; margin:10px; border:1px solid violet" src="media/puppy.png" alt="강아지"> <div style="display:inline"> 강아지를 분양합니다. 잘 키워주실 분 연락처 남겨 주세요. </div> </div><hr> <form> 도시 <input type="radio" name="location" value="seoul">서울 <input type="radio" name="location" value="busan">부산 <input type="radio" name="location" value="kwangju">광주 <br> 전화번호 <input type="tel"><br><br> <input type="button" value="질문 버튼"> <input type="submit" value="submit"> <input type="reset" value="reset"> </form> </body> </html> <!-- 다음 키 이벤트 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>키 이벤트</title> <script> function whatKeyDown(e) { let str = ""; let div = document.getElementById("div"); div.innerHTML = ""; // div 객체 내용 초기화 str += "e.key = " + e.key + "<br>"; str += "e.code = " + e.code + "<br>"; div.innerHTML = str; // div 객체에 html 문자열 출력 } </script> </head> <body> <h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3> <hr> 텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.<br> <input type="text" id="text" onkeydown="whatKeyDown(event)"> <div id="div" style="background-color:skyblue; width:250px; height:50px"> </div> </body> </html> <!-- 다음 키 이벤트 예제 --> <!DOCTYPE html> <html><head><meta charset="utf-8"><title>키 이벤트 응용</title> <style> td { width:50px; height:50px; border:1px solid orchid; } </style> <script> let tds; let prevIndex=0, index=0; window.onload = function () { // 웹 페이지의 로딩 완료시 실행 tds = document.getElementsByTagName("td"); tds[index].style.backgroundColor = "orchid"; } window.onkeydown = function (e) { switch(e.key) { case "ArrowDown" : if(index/3 >= 2) return; // 맨 위 셀의 경우 index += 3; break; case "ArrowUp" : if(index/3 < 1) return; // 맨 아래 셀의 경우 index -= 3; break; case "ArrowLeft" : if(index%3 == 0) return; // 맨 왼쪽 셀의 경우 index--; break; case "ArrowRight" : if(index%3 == 2) return; // 맨 오른쪽 셀의 경우 index++; break; } tds[index].style.backgroundColor = "orchid"; tds[prevIndex].style.backgroundColor = "white"; prevIndex = index; } </script></head> <body> <h3>상하좌우 키로 셀 이동하기</h3><hr> <table> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> </body></html>
실제 출력 미리보기
e.key = ArrowRight
e.code = ArrowRight
e.code = ArrowRight
용어 용어 정리
event사용자 동작이나 브라우저 상태 변화가 발생했다는 신호입니다.
keydown키를 누르는 순간 발생하는 키보드 이벤트입니다.
e.key사용자가 입력한 키의 의미 값을 나타냅니다. 예: ArrowRight, a
e.code키보드 물리 위치에 가까운 코드를 나타냅니다. 예: KeyA, ArrowRight
onkeydown키를 누를 때 실행할 함수를 연결하는 이벤트 속성입니다.
index여러 td 중 현재 선택된 셀의 순번을 저장하는 변수입니다.
1 이벤트가 발생하는 순간
이벤트는 사용자가 버튼을 누르거나 입력칸에 글자를 쓰는 순간 발생합니다. 키 이벤트는 입력 요소에 포커스가 있거나 window에 리스너가 등록되어 있을 때 키보드 입력을 감지합니다.
키 누름
→
keydown 발생
→
event 객체 전달
→
화면 갱신
2 e.key와 e.code
e.key는 사용자가 입력한 의미를, e.code는 키보드의 물리적 위치를 나타내는 값에 가깝습니다. 일반 학습 예제에서는 e.key로 방향키 이름을 비교하는 방식이 가장 직관적입니다.
| 키 | e.key | 사용 예 |
|---|---|---|
| 아래 방향키 | ArrowDown | 아래 셀로 이동 |
| 위 방향키 | ArrowUp | 위 셀로 이동 |
| 왼쪽 방향키 | ArrowLeft | 왼쪽 셀로 이동 |
| 오른쪽 방향키 | ArrowRight | 오른쪽 셀로 이동 |
3 이벤트 정보 출력
첫 번째 키 이벤트 예제는 입력칸에서 키를 누를 때마다 div 내용을 비우고, e.key와 e.code를 다시 출력합니다. 이런 방식은 이벤트 객체가 어떤 값을 담는지 확인할 때 유용합니다.
function whatKeyDown(e) { let div = document.getElementById("div"); div.innerHTML = ""; div.innerHTML = "e.key = " + e.key + "<br>" + "e.code = " + e.code; }
반응형
4 방향키 이동 로직
3x3 표는 td가 총 9개입니다. 위아래 이동은 한 줄이 3칸이므로 index에 3을 더하거나 빼고, 좌우 이동은 1을 더하거나 뺍니다.
| 키 | 계산 | 경계 조건 |
|---|---|---|
| ArrowDown | index += 3 | 마지막 줄이면 이동 금지 |
| ArrowUp | index -= 3 | 첫 줄이면 이동 금지 |
| ArrowLeft | index-- | 왼쪽 끝이면 이동 금지 |
| ArrowRight | index++ | 오른쪽 끝이면 이동 금지 |
5 prevIndex가 필요한 이유
새 셀을 orchid로 칠하는 것만으로는 이전 셀이 계속 색칠된 채 남습니다. 그래서 이전 위치를 prevIndex에 저장하고, 이동 후 이전 셀을 white로 되돌립니다.
index
현재 선택된 셀의 위치입니다.
prevIndex
직전에 선택되어 있던 셀의 위치입니다.
6 window.onload 초기화
td 목록은 문서가 만들어진 뒤에 가져와야 합니다. 그래서 window.onload 안에서 getElementsByTagName("td")를 실행하고 첫 번째 셀에 배경색을 줍니다.
1
문서 로드table과 td가 DOM에 생성됩니다.
2
td 수집getElementsByTagName으로 모든 td를 가져옵니다.
3
첫 셀 표시tds[0] 배경색을 orchid로 지정합니다.
7 이벤트 적용 범위
입력칸 예제는 input 요소에 onkeydown이 붙어 있어 해당 입력칸에 포커스가 있을 때만 동작합니다. 방향키 예제는 window.onkeydown을 사용하므로 페이지 전체에서 키 입력을 받습니다.
| 등록 위치 | 동작 범위 | 예시 |
|---|---|---|
| input onkeydown | 입력칸 포커스 중 | 키 값 출력 |
| window.onkeydown | 문서 전체 | 방향키 이동 |
| body onload | 문서 로드 완료 | 초기 안내 |
| button onclick | 버튼 클릭 | 질문 버튼 |
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| td를 로드 전에 찾음 | tds가 비어 있거나 오류가 납니다. | window.onload 안에서 찾습니다. |
| 경계 조건 누락 | 표 밖 인덱스로 이동하려다 오류가 납니다. | 첫 줄, 마지막 줄, 좌우 끝 조건을 검사합니다. |
| 이전 셀 색을 지우지 않음 | 여러 셀이 계속 칠해집니다. | prevIndex 셀을 white로 되돌립니다. |
| e.key 문자열 오타 | 방향키가 반응하지 않습니다. | 실제 출력되는 e.key 값을 먼저 확인합니다. |
| 포커스 위치를 고려하지 않음 | 키 이벤트가 안 잡히는 것처럼 보입니다. | input 이벤트인지 window 이벤트인지 구분합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 이벤트 개념 | 사용자 동작이 이벤트로 전달되는 흐름을 설명합니다. |
| 키 값 | e.key와 e.code를 구분합니다. |
| 인덱스 이동 | 3x3 표에서 방향키별 index 계산을 이해합니다. |
| 경계 처리 | 표 밖으로 나가지 않도록 조건을 둡니다. |
| 화면 갱신 | 현재 셀과 이전 셀의 배경색을 함께 관리합니다. |
핵심 한 줄 요약
key event키보드 입력 정보를 event 객체로 받아 화면 상태를 바꿉니다.
e.key방향키 이동 로직에서 비교하기 좋은 의미 값입니다.
index현재 선택 위치를 숫자로 관리하면 표 이동을 계산할 수 있습니다.
boundary경계 조건을 넣어 표 밖으로 이동하지 않게 합니다.
Tags
#JavaScript #키이벤트 #keydown #e.key #e.code #ArrowKey #DOM #table #event #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, 키이벤트, keydown, e.key, e.code, ArrowKey, DOM, table, event, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript 타이머 — setInterval · setTimeout 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript window.open · close — 윈도우 열기·닫기 완전 정리 (0) | 2026.07.05 |
| JavaScript 폼 입력 요소 — onfocus·radio·checkbox 완전 정리 (0) | 2026.07.05 |
| JavaScript 이미지 변경 — new Image 프리로딩·select 완전 정리 (0) | 2026.07.05 |
| JavaScript 마우스 이벤트 — 클릭·휠·좌표·우클릭 완전 정리 (0) | 2026.07.05 |
댓글