JavaScript 모바일 브라우저 전용 이벤트
모바일 브라우저 환경에서 특화되어 사용되는 이벤트 API를 살펴보자.
터치 이벤트
PC에서는 마우스나 키보드로 애플리케이션을 사용하는 데 필요한 동작과 정보를 입력한다면 모바일 환경에서는 사용자 터치로 필요한 동작과 정보를 입력한다. 동작과 정보를 입력하기 위해 기기의 화면에 손가락을 댔을 때 발생하는 이벤트가 터치 이벤트다.
모바일 환경에서도 마우스 이벤트가 발생하지만 터치 이벤트보다 느리고 비정상적으로 발생하기 때문에 이용하기 어렵다. 또한 마우스 이벤트로는 손가락 여러 개로 터치했을 때의 모든 터치 정보를 얻을 수 없다. 모바일 환경에서 사용자 터치를 이용하는 플리킹이나 스크롤 같은 기능을 구현하려면 터치 이벤트에 대해 알아야 한다.
터치 이벤트는 데스크톱 브라우저의 마우스 이벤트와 유사하나 몇 가지 다른 점이 있다. 터치 이벤트는 사용자가 2~3개의 손가락으로 화면을 조작할 경우 각 터치에 대한 정보를 모두 얻을 수 있다.
mouseover 이벤트에 대응하는 터치이벤트는 없다. 정확한 좌표값을 얻을 수 있는 마우스 이벤트와 달리 손가락 접촉면이 큰 터치 이벤트는 접촉 표면의 평균 좌표값을 얻는다.
터치 이벤트는 클릭 이벤트나, 스크롤 이벤트, 마우스 이벤트보다 먼저 발생한다. 터치 이벤트에서 기본 기능을 막거나 이벤트 버블링을 중지한다면 이후에 발생하는 이벤트에 영향을 줄 수 있으므로 주의해야 한다.
현재 터치 이벥트는 웹킷 계열의 브라우저(iOS용 사파리, 안드로이드)에서만 지원하고 그 밖의 브라우저(오페라 미니, 파이어폭스, 인터넷 익스플로러 모바일 등)에서는 지원하지 않는다. 최근 출시한 윈도우8 모바일에서는 포인터(MSPointer) 이벤트가 추가돼서 이를 터치 이벤트 대신 사용할 수 있다.
터치 이벤트의 종류와 이벤트 객체의 속성
터치 이벤트에는 이벤트가 발생하는 시정에 따라 다음과 같이 네 가지 종류의 이벤트가 있다.
| 이벤트 이름 | 설명 |
|---|---|
| touchstart | 화면에 손가락이 닿을 때 발생한다. |
| touchmove | 화면에 손가락을 댄 채로 움직일 때 발생한다. |
| touchend | 화면에서 손가락을 뗄 때 발생한다. |
| touchcancel | 시스템에서 이벤트를 취소시킬 때 발생한다. 터치 이벤트를 취소한다는 것에 대한 표준이 정의돼 있지 않아 정확한 발생 조건은 브라우저마다 다르다. touchend 이벤트로 간주해도 무방하다. |
터치에 대한 정보는 이벤트 객체의 touches 속성과 targetTouches 속성, changedTouches 속성에 배열 형태로 저장된다. 배열의 크기는 터치한 손가락 개수에 따라 결정된다. 멀티 터치를 지원하지 않는 안드로이드 3.0 미만의 브라우저에서는 배열의 크기가 항상 1이다.
| 속성 | 설명 |
|---|---|
| touches | 화면상의 모든 터치를 저장한 배열 |
| targetTouches | ouches 속성과 유사하나 같은 요소 내에서 시작된 터치에 대한 정보만 반환 |
| changedTouches | 이전 이벤트로부터 변경이 있는 터치 정보를 저장한 배열 |
touchend 이벤트에서는 changedTouches 속성값만 제공하며, touches 속성과 targetTouches 속성의 배열 크기는 항상 0으로 반환한다. 그래서 touchend 이벤트에서 터치 정보가 필요할 때 touches 속성과 targetTouches 속성의 정보는 사용할 수 없다.
배열에 저장된 객체는 Touch 타입의 객체며 마우스 이벤트와 거의 차이가 없다. 다음표는 Touch 객체의 속성을 정리한 표다.
| 속성 | 설명 |
|---|---|
| indentfier | 터치한 인식점을 구분하기 위한 인식점 번호 |
| screenX | 기기 화면을 기준으로 한 X 좌표 |
| screenY | 기기 화면을 기준으로 한 Y 좌표 |
| clientX | 브라우저 화면을 기준으로 한 X 좌표 |
| clientY | 브라우저 화면을 기준으로 한 Y 좌표 |
| pageX | 문서를 기준으로 한 X 좌표 |
| pageY | 문서를 기준으로 한 Y 좌표 |
| target | 터치된 DOM 객체 |
터치 이벤트 발생 순서
터치 이벤트는 touchstart 이벤트 -> touchmove 이벤트(n개) -> touchend 이벤트의 순서로 모든 브라우저에서 동일하게 발생한다. 그러나 클릭 이벤트와 스크롤 이벤트, 마우스 이벤트까지 고려한 발생순서는 브라우저마다 다르다. 예를들어 iOS용 사파리의 스크롤 이벤트는 터치 이벤트 완료후 발생하지만 안드로이드 브라우저의 스크롤 이벤트는 touchmove 이벤트와 교차해서 발생하거나 여러번 발생하기도 한다.
다음은 모바일 브라우저에서 이벤트 발생 순서를 정리한 표다.
| 동작 | 발생순서 | |
|---|---|---|
| 터치 | touchstart -> touchend -> mousemove -> mousedown -> mouseup -> mouseover -> click 마우스 이벤트는 touchend 이벤트 이후에 발생된다. |
|
| 수직방향이동 | 사파리 | touchstart -> touchmove(n개) -> touchend -> (mousemove -> mousedown - > mouseup ) -> scroll(0~n개) scroll 이벤트는 마지막에 한 번 발생한다. 마우스 이벤트는 touchend 이벤트 이후에 발생한다. |
| 수직방향이동 | 안드로이드 | touchstart -> [touchmove -> mousemove](n 개) -> scroll(0 안드로이드 브라우저에서는 스크롤 이벤트가 여러 번 발생한다. mousemove 이벤트는 종종 touchend 이벤트 이후나 touchmove 이벤트 중간에 나타난다. |
| 수직방향이동 | 안드로이드 2.3 (갤럭시 S, 갤럭시 S2) 안드로이드 3.0 이상 |
touchstart -> touchmove -> scroll(0~n번) 갤럭시 S와 갤럭시 S2의 안드로이드 2.3에서는 iOS용 사파리와 같은 형태로 scroll 이벤트가 마지막에 한 번만 나타난다. 안드로이드 3.0부터는 touchend 이벤트가 발생하지 않는다. |
| 수평방향이동 | touchstart -> [touchmove -> mousemove](n개) -> touchend -> mousemove(n개) mousemove 이벤트는 종종 touchend 이벤트 이후나 touchmove 이벤트 중간에 나타난다. touchstart -> touchmove -> scroll(0~n개) 안드로이드 3.0 부터는 수평방향으로 이동해도 scroll 이벤트가 발생하며, touchend 이벤트가 발생하지 않는다. |
제스처 이벤트
제스처 이벤트는 터치 이벤트와 비슷하다. 그러나 터치 이벤트는 한 손가락을 움직일 때 발생하는 이벤트고, 제스처 이벤트는 두 손가락을 움직을 때 발생하는 이벤트다. 휴대촌에서 손가락 두 개로 사진을 확대하고 축소할 때 브라우저에서 발생하는 이벤트가 제스처 이벤트다. 제스처 이벤트 객체에서는 사용자의 손가락 움직임이 확대 또는 축소 중인지, 회전 중인지에 대한 정보를 얻을 수 있다.
제스처 이벤트에는 이벤트가 발생하는 시점에 따라 gersturestart 이벤트와 gersturechange 이벤트, gestuerend 이벤트로 세 종류의 이벤트가 있다. 터치 이벤트의 touchstart 이벤트, touchmove 이벤트, touchend 이벤트처럼 이벤트가 시작할 때, 손가락이 움직일 때, 이벤트가 끝났을 때 발생한다. 단, 이 이벤트는 iOS에서만 발생하고 안드로이드에서는 발생하지 않는다.
| 이벤트 이름 | 설명 |
|---|---|
| gersturestart | 화면에 두 손가락이 닿을 때 발생한다. |
| gersturechange | 화면에서 두 손가락이 움직일 때 발생한다. |
| gestuerend | 화면에서 두 손가락을 뗄 때 발생한다. |
두 손가락을 사용할 때 발생하는 제스처 이벤트 객체의 속성에는 두 가지가 있다. 하나는 두 손가락을 벌리거나 좁혀서 요소를 확대 또는 축소할 때 나타나는 정보인 scale 속성이고, 또 다른 하나는 두 손가락으로 요소를 회전할 때 나타나는 정보인 rotation 속성이다.
(제스처 이벤트 객체의 속성)
| 속성 | 설명 |
|---|---|
| scale | 두 손가락을 벌리거나 좁혀서 확대 또는 축소한 비율 |
| rotation | 두 손가락을 돌려서 회전한 각도 |
orientationcange 이벤트
모바일 환경에서는 기기의 회전 상태에 따라 화면의 방향이 가로나 세로로 변한다. 기기가 회전하면 화면의 발향이 가로에서 세로로, 또는 세로에서 가로로 바뀌고, 이때 orientationcange 이벤트가 발생한다. orientationcange 이벤트는 기기의 회전 상태에 따라 사용자에게 다른 UI를 보여주는 반응형 웹을 구현하는데 필요한 기능이다.
orientationcange 이벤트를 지원하는 환경은 다음과 같다.
- 안드로이드 2.2 이상의 브라우저
- iOS 3.2 이상의 사파리
orientationcange 이벤트가 발생하지 않는 하위 버전의 브라우저에서는 orientationcange 이벤트 대신 resize 이벤트를 이용해 모바일 기기의 회전 상태를 파악할 수 있다.
운영체제별 orientationcange 이벤트 특징
orientationcange 이벤트는 운영체제가 기기마다 다르게 동작한다. 이는 운영체제의 오류이거나 기기의 특성 때문인 경우가 대부분이다. 특히, 제조사가 다양한 안드로이드 기반의 기기에서는 그 차이가 더욱 크다.
이러한 차이는 모든 운영체제와 기기에서 회전 상태를 정상적으로 인식하고 동작하는 기능을 구현하려면 꼭 알아야 할 사항이다.
iOS에서 orientationcange 이벤트
iOS에서는 orientationcange 이벤트의 동작에 오류가 매우 적어 기기의 회전 상태를 확인하는데 매우 유용하다. 다만 iOS의 버전에 따라 resize 이벤트와 scroll 이벤트, orientationcange 이벤트의 발생 순서가 달라 이벤트에 따라 동작하는 기능을 구현할 때 주의해야 한다. iOS의 각 버전별로 이벤트가 발생하는 순서는 다음과 같다.
| 버전 | 이벤트 발생 순서 |
|---|---|
| 6.x 5.x |
orientationcange -> resize -> scroll |
| 4.x 3.x |
resize -> orientationcange -> scroll |
안드로이드에서 orientationcange 이벤트
안드로이드에서 orientationcange 이벤트는 운영체제의 버전과 제품에 따라 다르게 동작한다. 그러나 다음과 같은 공통점이 있다.
버전에 상관없이 삼성에서 제조한 기기에서는 orientationcange 이벤트가 발생해도 window.innerHeight 속성값과 window.innerWidth 속성값은 회전하기 전의 값이다.
안드로이드 4.0 이상을 사용하는 삼성계열 이외의 기기에서는 orientationcange 이벤트가 발생했을 때 window.innerHeight 속성값과 window.innerWidth 속성값은 회전하기 후의 값이 된다.
안드로이드 2.3부터는 기본 브라우저에서 모두 orientationcange 이벤트 -> resize 이벤트 순서로 이벤트가 발생한다.
다음 표는 안드로이드 버전과 제품에 따른 orientationcange 이벤트의 특징이다.
| 버전 | 제품 | 이벤트 발생 순서와 특징 |
|---|---|---|
| 4.0 | 갤럭시 S3 LTE 갤럭시 S3 갤럭시 S2 갤럭시 S 갤럭시 노트 옵티머스 LTE |
orientationcange -> resize orientationcange 이벤트가 발생할 때 window.innerHeight 속성과 window.innerWidth 속성은 회전하기 전의 상태 값을 반환이다. |
| 3.0 | 갤럭시Tab2 | orientationcange -> resize orientationcange 이벤트가 발생할 때 window.innerHeight 속성과 window.innerWidth 속성은 회전하기 전의 상태 값을 반환이다. |
| 2.3 | 갤럭시 S2 갤럭시 S 갤럭시 노트 |
orientationcange -> resize orientationcange 이벤트가 발생할 때 window.innerHeight 속성과 window.innerWidth 속성은 회전하기 전의 상태 값을 반환이다. |
| 2.2 | 갤럭시 S 갤럭시 K |
orientationcange -> resize -> orientationcange 첫번 째 orientationcange 이벤트가 발생할 때 window.innerHeight 속성과 window.innerWidth 속성은 회전하기 전의 상태 값을 반환이다. 두번 째 orientationcange 이벤트가 발생할 때는 회전한 후의 상태값을 반환한다. |
| 2.2 | 옵티머스 2X 베가X |
orientationcange -> resize orientationcange 이벤트가 발생할 때 window.innerHeight 속성과 window.innerWidth 속성은 회전하기 전의 상태 값을 반환이다. |
| 갤럭시 탭 | orientationcange -> orientationcange -> orientationcange -> orientationcange 첫 번째와 두 번째, 세 번째로 orientationcange 이벤트가 발생할 때는 window.innerHeight 속성과 window.innerWidth 속성이 회전하기 전의 상태 값을 반환한다. 네 번째 orientationcange 이벤트가 발생할 때는 회전한 후의 상태 값을 반환한다. |
devicemotion 이벤트
devicemotion 이벤트는 모바일 기기가 움직이거나 회전할 때 발생하는 이벤트로, 움직일 떄의 가속도와 회전 각도에 대한 정보를 제공한다. devicemotion 이벤트를 이용하면 기기를 움직여서 동작하는 게임이나 수평계 등을 제작할 수 있다.
| 속성 이름 | 설명 |
|---|---|
| acceleration | 중력을 제거한 가속도 정보 사용자가 모바일 기기를 움직일 때만 속성값에 변화가 생긴다. |
| accelerationIncludingGravity | 중력을 포함한 가속도 정보. 모바일 기기를 가만히 뒤도 속성값에 변화가 생긴다. |
| interval | devicemotion 이벤트가 발생하는 시간의 간격(ms) |
| rotationRate | X축, Y축, Z축을 기준으로 한 모바일 기기의 회전 속도 |
devicemotion 이벤트는 이벤트가 발생할 때 모바일 기기를 움직이는 속도와 회전한 정도를 속성값으로 전달한다. devicemotion 이벤트의 속성은 읽기 전용이라 값을 확인만 할 수 있고 값을 설정할 수 는 없다.