HTML5 Canvas에서 keydown 이벤트 처리하기 – addEventListener와 tabindex 활용법

HTML5 Canvas에서 키보드(keydown) 이벤트 처리하기

HTML5의 <canvas> 요소는 기본적으로 포커스(focus)를 받을 수 없는 요소이기 때문에, 아무리 addEventListener로 keydown 이벤트를 등록해도 키보드 입력이 캔버스로 전달되지 않습니다. 캔버스에서 키보드 이벤트를 정상적으로 감지하려면 tabindex 속성을 추가해 해당 요소가 포커스를 가질 수 있도록 만들어야 합니다.

아래 예제는 먼저 마우스 클릭(mousedown)으로 어떤 요소가 선택되었는지 확인하고, 그 대상이 캔버스일 경우에만 keydown 이벤트를 처리하는 방식입니다.

var myTarget, myCanvas;

window.onload = function() {
   myCanvas = document.getElementById('canvas');
   document.addEventListener('mousedown', function(event) {
      myTarget = event.target;
      alert('This is mousedown event.');
   }, false);

   document.addEventListener('keydown', function(event) {
      if(myTarget == myCanvas) {
         alert('This is keydown event.');
      }
   }, false);
}

코드 동작 방식

• mousedown 이벤트: 문서 전체에서 클릭이 발생하면 event.target(클릭된 요소)을 myTarget 변수에 저장해 어느 요소가 선택되었는지 기록합니다.
• keydown 이벤트: 키보드 입력이 발생하면 myTarget이 캔버스와 일치하는지 검사하고, 일치할 때만 원하는 동작을 실행합니다.

canvas에 tabindex 속성 추가하기

HTML 마크업에서는 다음과 같이 캔버스에 tabindex 속성을 지정합니다.

<canvas id="canvas" width="300" height="150" tabindex="1"></canvas>

tabindex 속성이 설정되면 사용자가 Tab 키로 캔버스에 도달하거나 캔버스를 클릭했을 때 해당 요소가 포커스를 받게 됩니다. 이렇게 포커스를 가진 상태에서만 keydown 이벤트가 캔버스를 대상으로 발생하므로, 위 예제처럼 mousedown으로 선택된 대상을 추적하는 패턴과 함께 사용하면 안정적으로 키보드 입력을 처리할 수 있습니다.