sanguk.dev
작성완료
Pointer Events API로 통합 입력 처리

Pointer Events API로 통합 입력 처리

Pointer Events API는 마우스, 터치, 펜 입력을 통합하여 처리할 수 있는 효율적인 방법을 제공한다. 멀티 터치 지원과 이벤트 핸들러 코드량 감소의 장점이 있으며, 기본 사용 예시와 멀티 포인터 추적 방법을 통해 다양한 입력 장치를 쉽게 관리할 수 있다. CSS를 통해 터치 제스처 제어도 가능하다.

JavaScriptWeb Front Developer

Pointer Events API로 구현하는 통합 입력 처리 기법

웹에서 마우스, 터치, 펜 입력을 일관된 방식으로 처리하려면 Pointer Events API를 사용하는 것이 가장 간단하고 효율적이다. 기존에는 mousedown, touchstart처럼 입력 종류마다 다른 이벤트를 별도로 관리해야 했지만, Pointer Events는 이를 하나로 통합해준다.

Pointer Events의 장점

  • 마우스, 터치, 펜 입력을 동일한 인터페이스로 처리
  • 멀티 터치 지원
  • CSS touch-action과 함께 제스처 제어 가능
  • 이벤트 핸들러 코드량 감소

기본 사용 예시

javascript
const box = document.getElementById('box');

box.addEventListener('pointerdown', (e) => {
  console.log('pointer down', e.pointerType);
});

box.addEventListener('pointermove', (e) => {
  console.log('x:', e.clientX, 'y:', e.clientY);
});

box.addEventListener('pointerup', () => {
  console.log('pointer up');
});

멀티 포인터 추적

Pointer Events는 각 입력에 고유한 pointerId를 제공해 멀티 터치 처리에 유리하다.

javascript
const pointers = new Map();

document.addEventListener('pointerdown', (e) => {
  pointers.set(e.pointerId, e);
});

document.addEventListener('pointermove', (e) => {
  if (pointers.has(e.pointerId)) {
    pointers.set(e.pointerId, e);
  }
});

document.addEventListener('pointerup', (e) => {
  pointers.delete(e.pointerId);
});

터치 제스처 제어

기본 스크롤이나 줌 제스처를 막고 싶다면 CSS에서 설정할 수 있다.

css
#box {
  touch-action: none;
}

마무리

Pointer Events API는 다양한 입력 장치를 단일한 방식으로 처리할 수 있게 해주는 현대적인 웹 기술이다. 복잡한 입력 처리 로직을 단순화하고 멀티 터치까지 자연스럽게 다룰 수 있기 때문에 인터랙티브 UI를 만든다면 가장 먼저 고려해야 할 선택지다.