BOM을 사용하여 브라우저의 키보드 이벤트 처리

13 Oct 2023

개요

브라우저의 키보드 이벤트를 처리하기 위해 BOM(Browser Object Model)을 사용할 수 있습니다. BOM은 브라우저의 창이나 문서에 접근하고 조작하는 데 사용되는 객체 모델입니다. 이를 활용하여 사용자의 키보드 동작을 감지하고 적절히 처리할 수 있습니다.

keydown 이벤트는 사용자가 키보드의 키를 누를 때 발생합니다. 이벤트 핸들러를 등록하여 특정 키의 눌림을 감지하고 원하는 동작을 수행할 수 있습니다.

window.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    // Enter 키가 눌렸을 때 처리할 로직
  }
});

위의 코드는 window 객체에 keydown 이벤트 리스너를 등록하는 예시입니다. 이벤트 객체의 key 속성을 사용하여 어떤 키가 눌렸는지 확인할 수 있습니다. 위의 예시에서는 Enter 키가 눌렸을 때 처리할 로직을 작성하면 됩니다.

keyup 이벤트는 사용자가 키보드의 키를 뗄 때 발생합니다. 이벤트 핸들러를 등록하여 특정 키의 뗌을 감지하고 원하는 동작을 수행할 수 있습니다.

window.addEventListener('keyup', function(event) {
  if (event.key === 'Escape') {
    // Escape 키가 뗄 때 처리할 로직
  }
});

위의 코드는 window 객체에 keyup 이벤트 리스너를 등록하는 예시입니다. 마찬가지로 이벤트 객체의 key 속성을 사용하여 어떤 키가 떼어졌는지 확인할 수 있습니다. 위의 예시에서는 Escape 키가 떼어졌을 때 처리할 로직을 작성하면 됩니다.

#BOM #키보드이벤트