[JavaScript] keyboardEvent

 

🎈 Keyborad Event

KeyboardEvent는 사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트 객체에 속한다.

이벤트 유형은 keydown, keypress, keyup이 있으며 발생한 키도의 활동의 종류를 식별한다. 

사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트는 KeyboardEvent 객체에 속합니다.'

 

---

 

 keydown -  어떤 키가 눌렸는지 나타내는 코드를 제공

//keydown을 사용한 모달창 닫기.
...
document.addEventListener('keydown', function (e){
  if (e.key === "Escape") {
    closeModal();
  }
})
...

keyup -  키를 놓을 때마다 값을 기록합니다

<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p>
<p id="log"></p>

const log = document.getElementById('log');

document.addEventListener('keyup', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

 

Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.

 

keypress - 사용자가 키를 누를 때 발생하는 이벤트 (더 이상 권장되지 않는 기능이다. )