키보드 입력으로 이벤트 발생하기 [바닐라 자바스크립트]

목표 :
인터넷 화면에서 특정 키보드 입력을 받으면 이벤트를 발생시키도록 코드를 작성합니다
참고 :
https://cpro95.tistory.com/249 

참고한 블로그에 키 이벤트에 대해 굉장히 설명을 잘 해주셨는데, alt, ctrl, shift 등의 키 코드와 함께 정리해두면 좋을 것 같아 포스팅을 작성합니다. 

 

먼저 키보드입력을 받을 때, 자바스크립트에서는 'a' 나 'ctrl' 로 명명하지 않고 특정한 숫자 값으로 인식합니다. 

---

아래 표에서 각 키보드 버튼 별 숫자를 확인하세요

	키보드 버튼		키보드 버튼		키보드 버튼		키보드 버튼
112	F1	9	Tab	65	A	96	0
113	F2	12	Clear	66	B	97	1
114	F3	13	Enter	67	C	98	2
115	F4	16	Shift	68	D	99	3
116	F5	17	Ctrl	69	E	100	4
117	F6	18	Alt	70	F	101	5
118	F7	19	Pause	71	G	102	6
119	F8	20	Caps	72	H	103	7
120	F9	27	Esc	73	I	104	8
121	F10	32	스페이스바	74	J	105	9
122	F11	33	Page Up	75	K	106	곱하기 기호(*)
123	F12	34	Page Down	76	L	107	더하기 기호(+)
124	F13	35	End	77	M	108	enter
125	F14	36	Home	78	N	109	빼기 기호(-)
126	F15	37	왼쪽 화살표	79	O	110	소수점(.)
127	F16	38	위쪽 화살표	80	P	111	나누기기호(/)
48	0	39	오른쪽 화살표	81	Q	144	Nun Lock
49	1	40	아래쪽 화살표	82	R
50	2	41	Select	83	S
51	3	42	Print Screen	84	T
52	4	43	Execute	85	U
53	5	44	Snapshot	86	V
54	6	45	Insert	87	W
55	7	46	Delete	88	X
56	8	47	Help	89	Y
57	9			90	Z
8	백스페이스

---

예제1 

키보드의 'a'를 눌렀을 때 이벤트를 발생시키고 싶다면

window.addEventListener("keyup",fKeyUp,false);
function fKeyUp(e){
    if(e.keyCode == 65){
		발생할 이벤트
    }
}

코드설명

1. "keyup" 이벤트가 발생했을 때, fKeyUp 함수를 호출합니다.

3.  "keyup" 이벤트를 발생시킨 주인공이 65번 키보드 (키보드의 a) 라면, true값이 반환되어 if 문이 실행됩니다.

4. 실행할 이벤트에 대한 내용을 작성하면 됩니다. 

 

---

예제2

키보드의 여러 버튼을 동시에 눌렀을 때, 이벤트가 발생되도록 하고 싶다면

아래와 같이 코드를 작성하면 됩니다. 

이벤트가 발생되는 기준은 동일하게 "keyup" , 키보드 자판 a와 alt가 눌렸다가 동시에 올라온 때로 합니다.

window.addEventListener("keyup",fKeyUp,false);
var keys = [];
function fKeyUp(e){
    keys[e.keyCode] = true;
    if(keys[65]&&keys[18]){
		발생할 이벤트
    }
}

코드 설명

1. "keyup"이벤트가 발생할 경우, fKeyUp 함수를 호출합니다. 

2. 눌린 키를 여러 개 받아오기 위해 배열을 선언해줍니다.

5. 눌린 키가 65번(=a) 과 18번(=alt) 인 경우, true를 반환하며 if 문이 실행됩니다. 

6. 발생할 이벤트에 대한 내용은 여기에 작성하면 됩니다. 

 

---

저는 이후에 비슷한 상황에서 코드를 재사용하기 쉽도록 정리했지만, 

키보드 이벤트에 대한 자세한 내용은 제가 참고한 아래 블로그를 한번은 확인하시면 좋을 것 같습니다. 

정말 설명을 잘 해주셨어요.

[JS-중급편-이벤트] 6. 키보드 이벤트

여기서 설명을 마무리하겠습니다. 읽어주셔서 감사합니다 :)