[Web] Mouse Event, Touch Event, Pointer Event, Drag Event 비교

개요

브라우저 환경에서 사용자 상호작용을 처리하기위한 이벤트들에는 mouse event, touch event, pointer event, drag event 등 다양하게 존재한다.
각 event가 무엇인지 간단히 알아보고, 장단점도 다른 event들과 비교해보면서 이해해보자

Mouse Event

• 마우스 입력 장치로부터 발생하는 이벤트
• 이벤트 타입: mousedown / mousemove / mouseup / mouseenter / mouseleave
• 장점
  • 유연함 (drag event와 비교했을때 구현에 제약이 적음)
  • 모바일 지원이 쉬움 (touch event와 매우 유사)
• 단점
  • 모바일 입력 장치를 처리하지 못함
  • 특수한 요구사항 구현 시, 여타 event 종류에 비교적 많은 구현 비용이 요구됨 (ex. drag & drop)

Touch Event

• 터치 입력 장치로부터 발생하는 이벤트 ex. 모바일 디바이스 입력 이벤트
• 이벤트 타입: touchstart / touchmove / touchend / touchcancel
• touch의 경우 동시 터치를 지원하여 여러 포인터들이 존재할 수 있다는 점이 mouse event와의 가장 큰 차이점. 활성화된 여러 포인터들의 정보는 event 객체의 targetTouches 속성을 통해 읽을 수 있음
• 장점
  • 유연함
• 단점
  • 동시 터치에 따른 예외처리가 요구됨
  • 브라우저 기본 동작과의 충돌에 대한 예외처리가 요구됨

Pointer Event

• 마우스, 펜 또는 터치가능 표면의 접점 등 하드웨어에 구애받지 않은 입력 디바이스에 대한 이벤트
• 이벤트 타입: pointerdown / pointerup / pointermove / pointercancel
• pointerId, width, height, pressure, pointerType 등 속성값 제공
• 장점
  • 어느 입력 디바이스든지 처리 가능하여 생산성 향상
  • 대부분 브라우저에서 제공
• 단점
  • mouse, touch event에 대한 예외처리를 한 번에 해주어야함
• 주의점
  • 브라우저 기본 동작으로 인해, mobile device에서 pointer move 이벤트가 강제로 취소되어 pointer cancel 이벤트가 발생할 수 있음
    이를 해결하기 위해서는 touch-action css 프로퍼티를 적절히 설정해주도록 해야함.

Drag Event

• 포인트 입력 장치를 이용해 draggable 요소에 drag 입력 장치로부터 발생하는 이벤트
• 이벤트 타입: drag / dragstart, drop / dragenter / dragover / dragend
• 드래그 대상 요소 활성화
  • 해당 요소의 draggable attribute를 true로 설정
  • 그 결과 아래와 같이 drag image가 생성됨. 추가로, setDragImage API를 통해 커스텀도 가능
    

• DataTransfer
  • dragstart event에서 설정할 수 있으며, drop event 등에서 읽히고 처리할 수 있음
• 사례
  • drag and drop 기능 구현
• 장점
  • 적은코드로 빠르게 drag and drop 기능 구현 가능
• 단점
  • 유연성이 떨어지며, 구현에 제약이 있음

결론

구현하려는 요구사항에 따라 적합한 방식, 상황에 어울리는 도구가 달라질 수 있기 때문에 정답은 없는 것 같다. 따라서 사용자 경험에 미치는 영향, 생산성, 확장성 등 기준을 세운 후 가능한 비교를 해보고, 최적의 방안을 선택해야겠다.