JavaScript 모바일 브라우저 이벤트
모바일 환경의 사용자 인터페이스는 데스크톱 환경의 사용자 인터페이스와 다르다. 예를 들어, 모바일 기기에서는 데스크톱 PC의 키보드와 마우스 대신 소프트 키보드와 터치 액션을 제공한다. 그뿐만 아니라 데스크톱에서 지원하지 못하는 다양한 기기 정보를 제공한다. 이러한 차이점으로 모바일 브라우저는 데스크톱과 다른 별도의 이벤트를 제공하면서 데스크톱의 이벤트도 함께 제공한다.
데스크톱에서 발생하는 이벤트라도 모바일 브라우저에서는 이벤트 발생 순서, 발생하는 요소, 발생 빈도가 다르기 때문에 그 차이점을 분명히 알아야 한다. 예를 들면, focus 이벤트와 blur 이벤트는 모바일 브라우저에서는 폼 요소에서만 발생하기 때문에 링크나 다른 요소에서는 사용할 수 없다.
모바일 브라우저 전용 이벤트
모바일 브라우저에서는 터치 사용자 인터페이스에서 발생하는 이벤트와 회전과 같이 기기의 상태에 따라 발생하는 이벤트가 추가로 지원된다. 추가로 지원되는 이벤트는 다음과 같다.
| 이벤트 | 설명 | 특징 |
|---|---|---|
| 터치 이벤트 | 스크린에 손가락을 터치했을때 발생한다. ouchstart 이벤트, touchmove 이벤트, touchend 이벤트, touchcancel 이벤트가 발생한다. |
안드로이드 2.1에서는 오류가 있다. 마우스 이벤트보다 먼저 발생한다. |
| 제스처 이벤트 | 스크린에 손가락을 2개 이상 터치했을 때 발생한다. gesturestart 이벤트, gesturemove 이벤트, gestureend 이벤트가 발생한다. |
안드로이드 3.0 이상과 iOS에서 지원한다. |
| orientationchange 이벤트 | 기기가 회전할 때 발생한다. | 안드로이드 2.0의 기본 브라우저부터 지원하다. |
| devicemotion | 기기의 기월기와 가속도를 알아낼 수 있다. |
데스크톱 브라우저와 다르게 동작하는 이벤트
데스크톱 브라우저와 모바일 브라우저에서 공통적으로 발생하지만 동작 방식이나 순서가 다른 이벤트가 있다. 예를 들어, focus 이벤트와 blur 이벤트는 모바일 브라우저에서는 폼 요소에서만 발생한다. 그리고 mousewheel 이벤트는 iOS용 사파리에서만 발생한다. 또한 resize 이벤트는 모바일 브라우저의 주소창이 움직일 때 발생하기도 한다.
[데스크톱 브라우저와 모바일 브라우저에서 다르게 발생하는]
| 이벤트 | 데스크톱 브라우저 특징 | 모바일 브라우저 특정 |
|---|---|---|
| click | 마우스를 눌렀다가 뗄 때 발생 |
터치 이벤트와 마우스 이벤트 발생 이후에 마지막에 발생한다. click 이벤트에 핸들러를 사용하면 체감 반응이 늦다. click 이벤트가 발생할 때 하이라이트가 발생한다. |
| focus | 객체에 포커스가 들어올 때 발생 |
폼 요소에서만 발생한다. 안드로이드 브라우저의 버전에 따라 2번씩 발생하는 오류가 있다. |
| blur | 객체에서 포터스가 나갈 때 발생 |
폼 요소에서만 발생한다. 안드로이드 브라우저의 버전에 따라 2번씩 발생하는 오류가 있다. |
| scroll | 사용자가 객체의 스크롤 막대를 움직일 때 발생 |
사용자가 손가락으로 모바일 기기의 화면을 스크롤할 때 발생한다. scrollBy() 메서드나 scrollTo() 메서드로 호출할 때는 브라우저에 따라 발생하지 않을 수 있다. |
| resize | 객체의 크기가 바뀔 때 발생 |
주소창이 보이거나 소프트 키보드가 보일 때, 또는 모바일 기기가 회전했을 때 이벤트가 발생한다. 모바일 브라우저에 따라 다양하게 발생한다. |
| keydown | 키보드 키를 눌렀을 때 발생 |
모바일 브라우저엣 따라 한들을 입력할 때 keyCode 값이 모두 0으로 출력되거나 이벤트가 발생하지 않기도 한다. |
| keyup | 눌렀던 키보드를 뗄 때 발생 |
모바일 브라우저엣 따라 한들을 입력할 때 keyCode 값이 모두 0으로 출력되거나 이벤트가 발생하지 않기도 한다. |
| keypress | 기능 키를 제외한 키보드를 눌렀을 때 발생 |
모바일 브라우저에 따라 keydown 이벤트와 keyup 이벤트의 keyCode 값이 다르게 나온다. |
| mousewheel | 마우스 휠을 돌릴 때 발생 |
iOS용 사파리에서만 발생한다. overflow 속성이 scroll로 적용된 요소에서 멀티 터치할 때 발생한다. |
그 밖에 다음의 이벤트는 데스크톱 브라우저에서만 발생하고 모바일 브라우저에서는 발생 하지 않는 이벤트 이다.
- dbclick 이벤트
- contextmenu 이벤트
- cut 이벤트
- paste 이벤트
- copy 이벤트