30. Handling Keydown Events

안녕하세요. 박기린 입니다.

이전에 이벤트 핸들러에 대해서 설명을 드렸습니다. (해당 글 : https://arnopark.tistory.com/508)

마우스 클릭으로 이루어진 이벤트 핸들러(리스너)에 대해 중점으로 설명을 드렸습니다.

이번엔 자바스크립트 웹사이트에서 특정 키보드 입력이 생기면, 이에 맞춰서 특정 동작이 작동하게 하는 방법에 대해 알아보겠습니다.

 

---

Action Type - keydown

document.addEventListener('keydown', function(e) {
    console.log(e);
});

addEventListener()는 첫 번째 인수로 action type을 받습니다.

키보드 입력을 받고 싶으면 'keydown'을 지정해주시면 됩니다.

그러면 handler(listener) function에 어떤 키를 입력했는지를 인수(e)로 전달받을 수 있습니다.

 

 

---

KeyboardEvent object

위의 예제 코드를 넣고 enter키를 눌렀을 때 표시되는 console

action type이 'keydown'으로 지정되면, object를 handler(listener) function은 인수로 event object(KeyboardEvent)를 받습니다.

이 event object의 'key, code' properties를 통해 어떤 키가 눌렸는지를 확인할 수 있습니다.

 

 

 

document.addEventListener('keydown', function(e) {
    console.log(e.key);

    if (e.key === 'Escape') {
        if (!modal.classList.contains('hidden')) {
            closeModal();
        }
    }
});

이를 통해서, '특정 키'를 입력했을 때 '특정 동작'이 나타나게끔 할 수 있습니다.

위의 코드에서 'Escape'는 말 그대로 'Esc' 키를 의미합니다. 'Esc'키를 입력하면 모달창이 꺼지도록 기능을 구현한 모습입니다.

 

 

---

KeyboardEvent.keyCode 종류

['Escape', 'Enter']와 같이 KeyboardEvent object의 {'key', 'code'} properties에 들어가는 키입력의 종류는

[https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#value_of_keycode] 이 글을 통해서 확인하실 수 있습니다.