Jun 개발노트

터치이벤트

June 29, 2020

터치이벤트(touch Event)

  1. 터치이벤트

    • 터치이벤트는 손가락을 화면에 댈 때, 화면을 따라 드래그할 때, 화면에서 손을 땔 때 발생

      • touchstart : 손가락으로 화면을 터치할 때 발생하며, 이미 다른 손가락을 화면에 대고 있어도 다른 손가락을 대면 또 발생
      • touchmove : 손가락을 화면에서 움직일 때 계속 발생합니다. 이 이벤트가 일어나느 동안 preventDefaut()를 호출하면 스크롤을 막을 수 있습니다.
      • touchend : 손가락을 화면에서 뗄 때 발생합니다.
      • touchcancel : 시스템에서 터치를 더 이상 추적하지 않을 때 발생합니다. 언제 이런 상황이 발생하는지 명확하게 문서화되지는 않았습니다
    • 각 이벤트는 모두 버블링되어 올라가며 취소 가능합니다.
  2. 터치이벤트 객체 프로퍼티

    • clientX : 뷰포트를 기준으로 한 터치 x좌표
    • clientY : 뷰포트를 기준으로 한 터치 y좌표
    • identifier : 터치의 고유한 ID
    • pageX : 페이지를 기준으로 한 터치의 x좌표
    • pageY : 페이지를 기준으로 한 터치의 y좌표
    • screenX : 화면을 기준으로 한 터치의 x좌표
    • screenY : 화면을 기준으로 한 터치의 y좌표
    • target : 터치의 타깃인 DOM 노드
  3. touchend 주의사항

    • touchend 이벤트가 일어나면 마지막 터치 정보를 표시합니다. touchend 이벤트에는 활성인 터치가 없으므로 touches 컬렉션도 존재하지 않습니다.
    • changedTouches 컬렉션을 반드시 대신 사용해야 합니다.
  4. 요소를 탭 했을때 이벤트가 일어나는 순서(마우스 이벤트 포함)

    1. touchstart
    2. mouseover
    3. mousemove(한 번만) : 클릭했을때!! 마우스가 움직인다.
    4. mousedown
    5. mouseup
    6. click
    7. touchend

Written by Junho You 배운것을 기록하자