Touch Event

모바일 브라우저는 데스트탑이나 노트북의 브라우저에 없는 이벤트가 두 가지 있습니다. 바로, 화면 방향 전환 이벤트와 터치 이벤트입니다. 여기서는 화면 방향 전환 이벤트를 알아봅니다. 화면 방향 전환 이벤트의 정식 명칭은 orientationchange 이벤트 입니다. 예제를 만들면서 살펴봅시다. orientationgchange 이벤트는 window 객체에 있는 이벤트입니다. 따라서 아래의 소스 코드처럼 이벤트를 연결합니다. 간단한 이벤트 연결 방식을 지원하지 않으므로 bind() 메서드를 사용해야 합니다.

터치 이벤트

터치 이벤트
이벤트 이름 설명
touchstart 터치를 시작할 때 발생합니다.
touchend 터치를 종료할 때 발생합니다.
touchmove 터치한 상태로 이동할 때 발생합니다.
touchenter 터치가 요소의 경계 외부에서 내부로 이동할 때 발생합니다.
touchleave 터치가 요소의 경계 내부에서 외부로 이동할 때 발생합니다.

※ 참고 ※
touchcancel 이벤트가 존재하지만 현재 touchend 이벤트와 차이가 없습니다. 터치를 취소하는 것 자체의 표준이 제대로 정의되지 않았으므로 아직은 사용할 수 필요가 없습니다.
터치 이벤트 표준이 굉장히 불안정하므로 스마트폰에서는 터치 이벤트와 마우스 이벤트를 동시에 지원하는 경우도 있고, 터치 이벤트만 지원하는 경우도 있으며, 심지어는 마우스 이벤트만 지원하는 경우도 있습니다. 예로, 윈도우폰 7의 현재 버전 망고는 터치 이벤트를 지원하지 않습니다. 따라서 모바일 애플리케이션을 만들 때는 귀찮지만 두 가지 이벤트를 모두 지원하게 만드는 게 좋습니다.

터치 이벤트가 마우스 이벤트와 결정적으로 다른 점은 인식 점의 갯수에 있습니다. 마우스 커서는 하나이므로 하나의 점만 인식하면 되지만, 손가락은 여러 개이므로 여러 점을 인식해야 합니다. 하지만, 역시나 터치 이벤트의 표준이 굉장히 불안정하므로 하나의 손가락만 인식하는 모바일 전용 브라우저가 더 많습니다. 대표적으로 안드로이드는 3.0 버전 미만의 웹 브라우저에서는 터치를 하나만 인식합니다. 간단한 예제를 만들어 보며 터치 이벤트와 관련되 내용을 살펴 봅시다.

터치 이벤트는 간단한 이벤트 연결 방식을 사용할 수 없습니다. 따라서 orientationchange 이벤트와 마찬가지로 bind() 메서드를 사용해야 합니다. 아래의 코드처럼 bind() 메서드를 사용해 touchstart, touchmove, touchend 이벤트를 연결합니다.

							$(function(){
								$(document).bind('touchstart',function (e) {
									$('body').append("

touch Start

"); }); $(document).bind('touchmove',function (e) { $('body').append("

touch Move

"); }); $(document).bind('touchend',function (e) { $('body').append("

touch End

"); }); });
터치 이벤트는 jQuery 현재 1.7 버전에서 지원하지 않으므로 jQuery 이벤트 객체도 이용할 수가 없습니다. jQuery 이벤트 객체는 표준 이벤트 객체를 한번 포장해 모든 브라우저에서 사용할 수 있게 만들어져 있지만, 터치 이벤트와 관련된 속성을 지원하지 않으므로 원래의 표준 이벤트 객체를 사용해야 합니다. 아래의 소스 코드처럼 jQuery 이벤트 객체의 originalEvent 속성을 사용해 표준 이벤트 객체를 추출해 사용합니다.
							$(function(){
								$(document).bind('touchstart',function (e) {
									var event = e.originalEvent;
								});	
								$(document).bind('touchmove',function (e) {
									var event = e.originalEvent;
								});	
								$(document).bind('touchend',function (e) {
									var event = e.originalEvent;
								});	
							});
						

터치 이벤트는 여러 개의 점을 인식한다고 언급했죠? 각 터치 인식 점은 이벤트 객체의 touches 속성에 들어갑니다. touches 속성은 배열인데요. 아이폰이나 안드로이드 3.0 이상에서만 여러 점의 터치 이벤트를 인식할 수 있습니다. 즉 현재 대부분의 스마트폰에서는 인식 점을 하나만 인식할 수 있습니다.
따라서 아래의 소스코드처럼 이벤트 객체의 touches 속성 0번째에 위치한 인식 점을 사용합니다. 각 인식 점은 마우스 이벤트와 유사한 속성을 갖습니다.

							$(function(){
								$(document).bind('touchstart',function (e) {
									var event = e.originalEvent;
									$("#output").html('

'+event.touches[0].screenX+'

'); e.preventDefault() }); $(document).bind('touchmove',function (e) { var event = e.originalEvent; $("#output").html('

'+event.touches[0].screenX+'

'); e.preventDefault() }); $(document).bind('touchend',function (e) { var event = e.originalEvent; $("#output").html('

'+event.touches[0].screenX+'

'); e.preventDefault() }); });

상기의 코드에서는 기본 이벤트를 제거했는데요. 터치 이벤트의 기본 이벤트는 화면 스크롤을 드래그하거나 크기를 변환하는 것입니다. 이를 제거하면 터치 점을 더 쉽게 인식할 수 있습니다. 인식 점의 속성은 아래의 표와 같습니다.
마우스 이벤트와 차이가 없으므로 쉽게 사용할 수 있을 것입니다.

터치 객체의 속성

터치 객체의 속성
속성 이름 설명
identifier 인식 점을 구분하기 위한 인식 점 번호
screenX 사용자 화면을 기준으로 한 X 좌표 위치
screenY 사용자 화면을 기준으로 한 Y 좌표 위치
clientX 브라우저의 화면을 기준으로 한 X 좌표 위치
clientY 브라우저의 화면을 기준으로 한 Y 좌표 위치
pageX 브라우저의 화면을 기준으로 한 X 좌표 위치
pageY 브라우저의 화면을 기준으로 한 Y 좌표 위치

※ 참고 ※
W3C의 표준에는 force, rotationAngle, altKey, shiftKey와 같은 추가 속성이 있지만, 현재 모든 스마트폰에서 지원하지 않습니다.