자바스크립트 키보드 이벤트
HTML 문서에서 키보드로 작업하려면 숙지해야 할 세 가지 이벤트가 있습니다.
그 세 가지 이벤트는 다음과 같습니다.
- keydown
- keypress
- keyup
위 이벤트의 이름을 얼핏 보면 각 이벤트가 수행하는 역할에 대한 모호한 아이디어가 이미 있을 것입니다.
키보드의 키를 누르면 keydown 이벤트가 시작됩니다.
방금 누른 키를 놓으면 keyup 이벤트가 시작됩니다.
이 두 이벤트는 상호 작용하는 모든 키에서 작동합니다.
그리고, keypress 이벤트는 특별한 이벤트입니다.
언뜻 보기에는 아무 키나 누르면 이 이벤트가 시작될 거 같습니다.
keypress 이름에도 불구하고 keypress 이벤트는 문자 (문자, 숫자 등)를 표시하는 키를 누를 때만 발생합니다.
문자 y와 같은 키를 눌렀다 놓으면 keydown, keypress 및 keyup 이벤트가 순서대로 실행되는 것을 볼 수 있습니다.
keydown 및 keyup 이벤트는 y 키가 단순히 키이기 때문에 발생합니다.
그리고 또, y 키가 문자 키이기 때문에 keypress 이벤트가 시작됩니다.
화면에 아무것도 표시하지 않는 키 (예 : 스페이스 바, 화살표 키, 기능 키 등)를 눌렀다 떼면 keydown 및 keyup 이벤트가 실행됩니다.
이 차이는 미묘하지만 애플리케이션에서 실제로 키 누름을 핸들링 할때 매우 중요합니다.
키보드 이벤트 이용하기
keydown, keypress 및 keyup 이벤트를 수신하는 방식은 다른 이벤트와 유사합니다.
해당 이벤트를 처리할 요소에 대해 addEventListener를 호출하고,
수신할 이벤트를 지정하고, 이벤트가 리스닝될때 호출되는 이벤트 처리 함수를 지정하고,
그리고 이 이벤트를 원하는지 여부를 나타내는 true / false 값을 지정하여 호출합니다.
다음은 세 가지 키보드 이벤트를 듣는 예입니다.
document.addEventListener("keydown", dealWithKeyboard, false);
document.addEventListener("keypress", dealWithKeyboard, false);
document.addEventListener("keyup", dealWithKeyboard, false);
function dealWithKeyboard(event) {
// gets called when any of the keyboard events are overheard
}
이러한 이벤트 중 하나라도 듣게 되면 dealWithKeyboard 이벤트 핸들러가 호출됩니다.
사실이 이벤트 핸들러는 문자 키를 누르면 세 번 호출됩니다.
키보드 이벤트 속성
키보드 이벤트에 반응하는 이벤트 핸들러가 호출되면 Keyboard 이벤트 인수가 전달됩니다.
앞에서 보았던 dealWithKeyboard 이벤트 핸들러를 다시 살펴보겠습니다.
해당 이벤트 핸들러에서 키보드 이벤트는 전달된 이벤트 인수로 표시됩니다.
(여기서는 event 인수)
function dealWithKeyboard(event) {
// gets called when any of the keyboard events are overheard
}
이 인수(event 인수)에는 다음과 같은 몇 가지 속성이 포함됩니다.
keyCode
키보드에서 누르는 모든 키에는 관련된 숫자가 있습니다.
이 읽기 전용 속성은 해당 숫자를 반환합니다.
charCode
이 속성은 keypress 이벤트에서 반환된 이벤트 인수에만 존재하며 사용자가 누른 문자 키에 대한 ASCII 코드를 포함합니다.
ctrlKey, altKey, shiftKey
이 세 가지 속성은 Ctrl 키, Alt 키 또는 Shift 키를 누르면 true를 반환합니다.
metaKey
metaKey 속성은 Meta 키를 누르면 true를 반환한다는 점에서 ctrlKey, altKey 및 shiftKey 속성과 유사합니다.
Meta 키는 Windows 키보드의 Windows 키와 Apple 키보드의 Command 키입니다.
Keyboard 이벤트에는 몇 가지 다른 속성이 포함되어 있지만 위에 표시된 속성이 가장 흥미로운 속성입니다.
이러한 속성을 사용하면 어떤 키가 눌렸는지 확인하고 그에 따라 반응할 수 있습니다.
다음 두 섹션에서 이에 대한 몇 가지 예를 살펴 보겠습니다.
몇 가지 예
키보드 이벤트로 작업하는 방법에 대한 지루한 기본 사항을 확인했으므로 지금까지 본 모든 것을 명확하게 (또는 잠재적으로 혼동할 수 있는!) 몇 가지 예제를 살펴보겠습니다.
특정 키를 눌렀는지 확인
다음 예제는 keyCode 속성을 사용하여 특정 키가 눌렸는지 확인하는 방법을 보여줍니다.
document.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode === 65) {
alert("The 'a' key is pressed.");
}
}
여기서 확인하는 특정 키는 a 키입니다.
내부적으로 이 키는 keyCode 값 65에 매핑됩니다.
구글에서 ASCII 코드라고 검색하면 해당 모든 키 및 문자 코드의 목록을 찾을 수 있습니다.
여기서 참고할 사항이 있습니다. 특정 키의 charCode 및 keyCode 값이 동일하지 않습니다.
또한 charCode는 이벤트 핸들러를 트리거 한 이벤트가 keypress 인 경우에만 반환됩니다.
이 예에서 keydown 이벤트는 charCode 속성에 유용한 정보를 포함하지 않습니다.
charCode를 확인하고 keypress 이벤트를 사용하려는 경우 위의 예제는 다음과 같습니다.
window.addEventListener("keypress", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.charCode === 97) {
alert("The 'a' key is pressed.");
}
}a 키의 charCode는 97입니다.
이러한 세부 사항에 대해서는 앞에서 나열한 키 및 문자 코드 표를 다시 참조하십시오.
화살표 키를 눌렀을 때 작업하기
우리는 프로그램이나 게임에서 화살표 키를 주로 사용합니다.
다음 코드 스니펫은 그 방법을 보여줍니다.
window.addEventListener("keydown", moveSomething, false);
function moveSomething(e) {
switch(e.keyCode) {
case 37:
// left key pressed
break;
case 38:
// up key pressed
break;
case 39:
// right key pressed
break;
case 40:
// down key pressed
break;
}
}
여러 키 누름 감지
여기서 흥미로운 점은 여러 번의 키 누름에 반응해야 할 때를 감지하는 것입니다.
다음은 이를 수행하는 방법의 예입니다.
window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);
var keys = [];
function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;
// Ctrl + Shift + 5
if (keys[17] && keys[16] && keys[53]) {
// do something
}
// Ctrl + f
if (keys[17] && keys[70]) {
// do something
// prevent default browser behavior
e.preventDefault();
}
}
function keysReleased(e) {
// mark keys that were released
keys[e.keyCode] = false;
}
이것에 대해 자세히 설명하려면 그 자체로 또 다른 튜토리얼이 필요하지만 어떻게 작동하는지 살펴보겠습니다.
먼저 누르는 모든 키를 저장하는 키 배열이 있습니다.
var keys = [];
키를 누르면 keysPressed 이벤트 핸들러가 호출됩니다.
function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;
// Ctrl + Shift + 5
if (keys[17] && keys[16] && keys[53]) {
// do something
}
// Ctrl + f
if (keys[17] && keys[70]) {
// do something
// prevent default browser behavior
e.preventDefault();
}
}
키가 해제되면 keysReleased 이벤트 핸들러가 호출됩니다.
function keysReleased(e) {
// mark keys that were released
keys[e.keyCode] = false;
}
이 두 이벤트 핸들러가 서로 어떻게 작동하는지 확인하십시오.
키를 누르면 값이 true 인 키 배열에 해당 키에 대한 항목이 생성됩니다.
키를 놓으면 동일한 키가 false 값으로 표시됩니다.
배열에서 누르는 키의 존재는 피상적입니다.
실제로 중요한 것은 그들이 저장하는 값(value)입니다.
alert 창과 같이 이벤트 처리기가 제대로 호출되는 것을 방해하는 것이 없으면 키 배열의 렌즈를 통해 볼 때 누른 키와 놓은 키 사이의 일대일 매핑을 얻을 수 있습니다.
최종적으로 어떤 키 조합이 눌렸는지 확인하는 것은 keysPressed 이벤트 핸들러에서 처리됩니다.
function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;
// Ctrl + Shift + 5
if (keys[17] && keys[16] && keys[53]) {
// do something
}
// Ctrl + f
if (keys[17] && keys[70]) {
// do something
// prevent default browser behavior
e.preventDefault();
}
}
명심해야 할 두 가지가 있습니다.
if문의 순서가 중요합니다.
누른 키 수의 내림차순으로 체크가 정렬되어 있는지 확인하십시오.
둘째, 일부 키 조합으로 인해 브라우저가 대신 작업을 수행할 수 있습니다.
브라우저가 자체적으로 작동하지 않도록 하려면 Ctrl + F를 체크할 때 preventDefault 메서드를 사용하여 브라우저가 자체적으로 작동하지 않도록 하십시오.
function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;
// Ctrl + Shift + 5
if (keys[17] && keys[16] && keys[53]) {
// do something
}
// Ctrl + f
if (keys[17] && keys[70]) {
// do something
// prevent default browser behavior
e.preventDefault();
}
}preventDefault는 Ctrl + f에 대한 브라우저 기본 기능인 찾기 대화 상자를 표시하지 않게 합니다.
Div 요소에서 키보드 이벤트 듣기
포커스를 받을 수 있는 모든 요소에서 키보드 이벤트를 수신할 수 있습니다.
html에서 가장 많이 쓰는 div 요소와 같은 일부 요소는 그러한 요소가 아닙니다.
초점을 맞출 수 없는 요소에 대한 키보드 이벤트를 수신하려면 tabindex 속성과 고유 한 숫자 값을 제공하여 초점을 맞출 수 있도록 하면 됩니다.
<div tabindex="0">
<h1>Blah!</h1>
</div>div 요소에 포커스가 있으면 해당 요소가 윤곽선을 갖는 것을 볼 수 있습니다.
해당 윤곽선을 숨기려면 요소에서 CSS 윤곽선 속성을 없음으로 설정하기만 하면 됩니다.
결론
키보드는 사람들이 컴퓨터와 같은 장치와 상호 작용하는 방식에 있어 매우 중요합니다.
'코딩 > Javascript' 카테고리의 다른 글
| CSS Grid Layout 설명 - 그리드 레이아웃 (0) | 2021.05.10 |
|---|---|
| [JS-중급편-이벤트] 7. 커스텀 이벤트 (0) | 2021.04.14 |
| [JS-중급편-이벤트] 5. 많은 요소에 대한 이벤트 처리 (0) | 2021.03.13 |
| [JS-중급편-이벤트] 4. 코드 실행의 최적시간 (0) | 2021.03.06 |
| [JS-중급편-이벤트] 3. 마우스 이벤트 (0) | 2021.02.07 |