JS 터치 와 제스처 이벤트 상세 설명

function handleTouchEvent(event){
//       
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX +
"," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //    
output.innerHTML += "<br>Touch moved (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);

요소 에 출력 합 니 다.touchmove 이벤트 가 발생 하면 기본 행동 을 취소 하고 스크롤 을 막 습 니 다.(터치 이동 의 기본 행동 은 스크롤 페이지 입 니 다)그리고 터치 작업 의 변화 정 보 를 출력 합 니 다.터치 엔 드 이 벤트 는 터치 조작 에 대한 최종 정 보 를 출력 합 니 다.터치 엔 드 이벤트 가 발생 했 을 때 터치 집합 에는 터치 대상 이 없습니다.활동 적 인 터치 조작 이 존재 하지 않 기 때 문 입 니 다.이 때 는 changeTouchs 집합 을 사용 해 야 합 니 다.
이 사건 들 은 문서 의 모든 요소 에서 발생 하기 때문에 페이지 의 다른 부분 을 각각 조작 할 수 있 습 니 다.화면 에 있 는 요 소 를 만 질 때 이 이벤트(마우스 이벤트 포함)가 발생 하 는 순 서 는 다음 과 같 습 니 다.
(1) touchstart
(2) mouseover
(3)mousemove(한번)
(4) mousedown
(5) mouseup
(6) click
(7) touchend
터치 이 벤트 를 지원 하 는 브 라 우 저 는 iOS 버 전 Safari,Android 버 전 WebKit,bada 버 전 Dolfin,OS6+의 BlackBerry WebKit,Opera Mobile 10.1+와 LG 전용 OS 의 Phantom 브 라 우 저 를 포함한다.
2.제스처 이벤트
iOS 2.0 의 사 파리 에는 제스처 이벤트 도 도입 됐다.두 손가락 이 화면 을 만 질 때 제스처 가 생기 고 제스처 는 디 스 플레이 항목 의 크기 를 바 꾸 거나 디 스 플레이 항목 을 회전 시킨다.세 가지 제스처 사건 이 있 는데 각각 다음 과 같이 소개 합 니 다.
gesturestart:한 손가락 이 화면 에 눌 렸 고 다른 손가락 이 화면 을 만 졌 을 때 터치 합 니 다.
gesturechange:화면 을 만 지 는 모든 손가락 의 위치 가 바 뀌 었 을 때 촉발 합 니 다.
gesturend:모든 손가락 이 화면 에서 이동 할 때 터치 합 니 다.
두 손가락 모두 사건 의 수신 용 기 를 만 졌 을 때 만 이 사건 을 촉발 시 킬 수 있다.하나의 요소 에 이벤트 처리 프로그램 을 설정 하 는 것 은 두 손가락 이 이 요소 의 범위 안에 동시에 있어 야 제스처 사건 을 촉발 할 수 있다 는 것 을 의미한다(이 요 소 는 목표 이다).이 사건 들 이 거품 을 일 으 키 기 때문에 사건 처리 프로그램 을 문서 에 올 려 놓 아 도 모든 제스처 사건 을 처리 할 수 있다.이때 사건 의 목 표 는 두 손가락 이 모두 그 범위 안에 있 는 그 요소 이다.
터치 사건 과 제스처 사건 사이 에는 어떤 관계 가 있다.손가락 을 화면 에 놓 으 면 touch start 이벤트 가 발생 합 니 다.다른 손가락 이 화면 에 놓 여 있 으 면 gesturstart 사건 을 먼저 촉발 한 다음 이 손가락 을 기반 으로 한 touch start 사건 을 촉발 합 니 다.한 손가락 이나 두 손가락 이 화면 에서 미 끄 러 지면 gesturechange 사건 이 발생 합 니 다.그러나 한 손가락 만 옮 기 면 gesturend 사건 이 발생 하고 이 어 이 손가락 을 기반 으로 한 touch end 사건 이 발생 한다.
터치 이벤트 와 마찬가지 로 모든 제스처 이벤트 의 이벤트 대상 은 표준 마우스 이벤트 속성 을 포함 하고 있 습 니 다.bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey 와 metaKey.이 밖 에 두 개의 추가 속성 도 포함 되 어 있다.rotation 과 scale.그 중에서 rotation 속성 은 손가락 변화 로 인 한 회전 각 도 를 나타 내 고 음 치 는 시계 반대 방향 으로 회전 하 며 정 치 는 시계 반대 방향 으로 회전 하 는 것 을 나타 낸다(이 값 은 0 부터).한편,scale 속성 은 두 손가락 사이 의 거리의 변화 상황 을 나타 낸다(예 를 들 어 안 으로 수축 하면 거 리 를 단축 시 킬 수 있다).이 수 치 는 1 부터 시작 해 거리 가 커지 면서 늘 어 나 거리 가 짧 아 지면 줄어든다.
다음은 제스처 이벤트 의 예 입 니 다.

function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

앞에서 터치 이 벤트 를 보 여 준 예 와 같이 이 코드 는 모든 이 벤트 를 같은 함수 에 연결 한 다음 이 함 수 를 통 해 모든 이벤트 에 대한 정 보 를 출력 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.