Pointer Events는 마우스나 터치, 펜 등 다양한 입력 장치에서 발생하는 이벤트를 하나의 API로 통합하여 처리하도록 만들어진 W3C의 표준입니다.
이 API는 Mouse Events, Touch Events와 같은 개별 이벤트들을 하나로 통합하여 다양한 입력 장치를 일관성 있게 다룰 수 있도록 해줍니다.
Pointer Events는 HTML5에서 처음 도입되었으며 주로 터치와 마우스 이벤트를 통합하여 모바일과 데스크탑 환경에서 모두 잘 작동하도록 도와줍니다.
Table of Contents
Pointer Events 개요
이는 마우스, 터치스크린, 펜 등 다양한 입력 장치에서 발생하는 이벤트를 처리하며 사용자 입력을 일관되게 처리하도록 해줍니다.
이 이벤트는 마우스와 터치 입력을 동시에 처리할 수 있기 때문에 터치스크린이 지원되는 기기에서도 마우스 입력과 동일한 방법으로 코드를 작성할 수 있습니다.
주요 이벤트
다양한 이벤트를 통해 포인터 관련 입력을 처리할 수 있습니다. 각각의 이벤트는 다음과 같습니다.
- pointerdown: 포인터(마우스, 터치, 펜 등)가 화면에 처음 접촉할 때 발생
- pointermove: 포인터가 움직일 때 발생
- pointerup: 포인터가 화면에서 떨어질 때 발생
- pointercancel: 포인터의 작업이 취소될 때 발생, 예) 사용자가 드래그 중에 다른 장치로 포인터를 변경하거나, 시스템에서 다른 이유로 이벤트가 취소된 경우
- pointerenter: 포인터가 요소에 진입할 때 발생
- pointerleave: 포인터가 요소에서 벗어날 때 발생
- pointerover: 포인터가 요소 위로 이동할 때 발생
- pointerout: 포인터가 요소 밖으로 나갈 때 발생
Pointer Event 주요 속성
Pointer Events 에서는 마우스와 터치 이벤트의 속성을 통합한 몇 가지 중요한 속성을 제공합니다.
이러한 속성을 사용하여 포인터에 대한 자세한 정보를 얻을 수 있습니다.
- pointerId: 포인터의 고유한 식별자로 동일한 포인터 이벤트를 추적할 때 사용
- pointerType:
"mouse","touch","pen"등 포인터의 종류 - isPrimary: 다중 터치가 발생한 경우 현재 포인터가 첫 번째인지 아닌지 표시
- clientX, clientY: 브라우저의 클라이언트 영역 내 포인터의 X, Y 좌표
- screenX, screenY: 화면에서 포인터의 X, Y 좌표
- pressure: 펜이나 다른 입력 장치에서의 압력 측정값,
0은 압력이 없음,1은 최대 압력 - tiltX, tiltY: 펜 입력 장치에서 펜의 기울기
- width, height: 터치스크린에서 손가락의 크기
Pointer Events와 Mouse/Touche Event의 차이점
Pointer Events는 기존의 Mouse Events와 Touch Events를 통합하여 다음과 같은 장점을 제공합니다:
- 통합된 API: 기존에 마우스와 터치 이벤트를 별도로 처리하던 방식에서 벗어나,
pointer라는 통합된 이벤트를 사용합니다. 이를 통해 마우스와 터치스크린 입력을 동일한 코드로 처리할 수 있습니다. - 멀티터치 지원: 여러 손가락이 동시에 화면에 터치할 때, 각 손가락을 별도의 포인터로 다룰 수 있습니다.
pointerId를 사용하여 각 터치나 입력을 구분할 수 있습니다. - 더 나은 포인터 캡처:
setPointerCapture와releasePointerCapture를 사용하면 포인터 이벤트가 특정 요소에 캡처되어 다른 곳을 클릭해도 해당 요소에서 계속 이벤트를 받을 수 있습니다. 이를 통해 더 정교한 드래그 앤 드롭을 구현할 수 있습니다.
정리
Pointer Events는 다양한 입력 장치에 대해 일관된 방법으로 이벤트를 처리하는 강력한 API입니다.
특히, 마우스, 터치, 펜을 통합하여 다룰 수 있기 때문에 멀티터치나 드래그 앤 드롭과 같은 복잡한 상호작용을 더 효율적으로 구현할 수 있습니다.