[Javascript] 키보드 이벤트(keyboard event) 종류

 

Javascript에서 처리할 수 있는 키보드 이벤트의 종류를 정리하였습니다.

 

1. 키보드 이벤트의 종류

 keydown 

 - 사용자가 키보드의 키를 눌렀을 때 발생합니다.

 keyup 

 - 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생합니다.

 keypress 

 - 사용자가 키보드를 눌렀을 때 발생합니다.

 - Alt, Ctrl, Shift, Esc 키등 몇 가지 키에서는 이 이벤트를 발생시키지 않습니다.

 - 이 이벤트는 사용을 권장하지 않습니다.

 

 

2. keydown, keyup, keypress 예제

<input id='my_input' type='text' />
<input id='clear' type='button' value='clear'/>
<div id='result' />

const my_input = document.getElementById('my_input');
const clear_btn = document.getElementById('clear');
const result_div = document.getElementById('result');

my_input.addEventListener('keydown', () => {
  result_div.innerHTML += '<div>keydown</div>';
});

my_input.addEventListener('keyup', () => {
  result_div.innerHTML += '<div>keyup</div>';
});

my_input.addEventListener('keypress', () => {
  result_div.innerHTML += '<div>keypress</div>';
});

clear_btn.addEventListener('click', () => {
  result_div.innerHTML = '';
})

 

위 예제는

input에 keydown, keyup, keypress 이벤트를 등록하고,

해당 이벤트가 발생하면 화면에 해당 이벤트 이름을 출력합니다.

 

입력창에 키보드 키를 눌러서 값을 입력하면,

keydown, keypress, keyup 순서로 이벤트가 발생합니다.

 

입력창에 하나의 키를 오래 누르고 있으면

keydown, keypress, keydown, keypress...가 반복적으로 발생하고,

마지막에 키보드에서 손을 떼었을 때, 

keyup 이벤트가 발생하는 것도 확인하세요.

 

 

---

키보드 이벤트에 대해 살펴보았습니다.

마우스에서 발생하는 이벤트는 다음의 포스팅을 참조하세요.

[Javascript] 마우스 이벤트(event) 종류

[Javascript] 마우스 이벤트(event) 종류