JavaScript 데스크톱과 다르게 동작하는 이벤트
모바일 브라우저에서도 화면이 스크롤되면 scroll 이벤트가 발생하고, 키보드와 마우스 관련 이벤트도 발생한다. 그러나 모바일 브라우저에서 발생하는 이런 이벤트는 데스크톱 브라우저에서 발생할 때와는 발생 순서나 발생 횟수 등이 다르다.
scroll 이벤트
scroll 이벤트는 브라우저의 스크롤 막대가 움직일 때 발생하는 이벤트다. PC에서 스크롤 막대를 내리거나 올릴 때 고정된 위치에 요소가 계속 보이게 할 때 scroll 이벤트를 많이 사용한다. 그 외에도 콘텐츠 주위에 계속 나타나는 레이어 또는 메뉴들을 scroll 이벤트로 제어한다.
모바일 브라우저에서 scroll 이벤트의 특징
PC에서는 스크롤 막대가 이동할 때 이벤트가 발생한다. 모바일 브라우저에서도 스크롤 위치가 변동될 때 scroll 이벤트가 발생하지만 모바일의 특정상 몇 가지 특징이 있다.
scroll 이벤트는 브라우저의 window 객체와 문서의 DOM 영역에서 발생한다. 하지만 overflow:scroll 속성을 지원하는 iOS 5 부터는 overflow:scroll 속성이 적용된 요소에서도 scroll 이벤트가 발생한다.
scroll 이벤트는 스크롤 위치가 변경될 때, window.scrollTo() 메서드나 window.scrollBy() 메서드가 호출될 때 발생한다. 그리고 모바일 특정상 iOS에서는 주소창이 감춰졌다 화면에 나타나거나 콘텐츠 양에 따라 화면이 스크롤 되어 주소창이 사라질 때도 scroll 이벤트가 발생한다. 안드로이드에서는 주소창이 화면에 나타나거나 사라질 때 scroll 이벤트가 아니라 resize 이벤트가 발생한다.
다음은 iOS와 안드로이드에서 scroll 이벤트의 발생 시점을 비교한 표다.
| 구분 | iOS | 안드로이드 |
|---|---|---|
| 스크롤 위치 이동 | 발생 | 발생 |
| scrollTo() 메서드 호출 scrollBy() 메서드 호출 |
iOS 5 이상 : 발생 iOS 4 이하 : 발생 안함 |
발생 |
| 주소창이 나타나거나 사라질 때 | 발생 단, iOS 7 에서는 발생 안함 |
발생 안함 resize 이벤트 발생 |
모바일 기기마다 scroll 이벤트 발생 시점과 발생 횟수가 다르다. iOS에서는 스크롤 이동이 끝난 상태에서 scroll 이벤트가 발생한다. 반면 안드로이드에서는 스크롤하고 있는 도중에 scroll 이벤트가 발생한다. 이벤트 발생 순서도 모바일 운영체제와 제조사, 버전에 따라 다르다.
iOS의 scroll 이벤트 발생 순서
| 버전 | 이벤트 발생 순서 |
|---|---|
| 7.x 6.x 5.x 4.x |
touchstart -> touchmove(1~n개) -> touchend -> scroll |
안드로이드의 scroll 이벤트 발생 순서
| 버전 | 제품 | 이벤트 발생 순서 |
|---|---|---|
| 4.2 | 갤럭시 S4 | touchstart -> touchmove -> scroll((1 |
| 4.1 | 갤럭시 S3 | touchstart -> touchmove -> touchend -> scroll(1~n개) |
| 4.1 | 갤럭시 S2 | touchstart -> touchmove -> scroll(1~n개) |
| 4.1 | 옵티머스 G | touchstart -> touchmove -> scroll((1 |
| 4.0 | 갤럭시 S3 갤럭시 S2 갤럭시 노트 넥서스 S |
touchstart -> touchmove -> scroll(1~n개) |
| 3.1 | 갤럭시 탭2 | touchstart -> touchmove -> touchend |
| 2.3.6 | 갤럭시 S2 | touchstart -> touchmove -> scroll(1~n개) |
| 2.1 | 갤럭시 S | touchstart -> touchmove -> touchend -> scroll(1~n개) |
마우스 이벤트와 키보드 이벤트
모바일과 데스크톱의 차이점 가운데 하나는 사용자 인터페이스다. 데스크톱에서는 사용자가 키보드와 마우스를 사용하지만 모바일에서는 키보드 대신 소프트 키보드를 사용하고 마우스 대신 터치 화면을 사용한다. 기본적으로 모바일 웹에서는 모바일 기기에서 사용하지 않는 이벤트를 사용할 필요가 없다. 하지만 모바일과 데스크톱에 모두 대응해야 한다면 두 환경에서 일어나느 ㄴ이벤트의 차이를 알아야 사용자에게 더 적합한 서비스를 제공할 수 있다. 데스크톱에서는 빈번하게 사용하지만 모바일에서는 사용할 수 없는 사용자 인터페이스의 이벤트인 마우스 이벤트와 키보드 이벤트를 살펴보겠다.
마우스 이벤트
마우스는 대표적인 데스크톱 사용자 인터페이스다. 모바일 기기에서는 마우스를 사용ㄹ하지 않지만 실제로는 마우스 이벤트가 모바일 웹에서도 발생한다. 모바일 웹에서 사용자가 화면을 터치했을 때 마우스 이벤트가 함께 발생한다. 마우스를 사용하지 않기 대문에 마우스 이벤트가 발생하지 않는 것이 맞지만 데스크톱 브라우저에 근간을 둔 브라우저의 성격상 마우스 관련 이벤트가 함께 발생한다.
마우스 이벤트는 다음과 같다. 데스크톱의 마우스 이벤트는 모바일 웹의 터치와 비슷하다. 다만 mouseover 이벤트나 mousewheel 이벤트와 같이 마우스 포인터의 움직임으로 발생하는 이벤트나 마우스 휠의 동작으로 발생하는 이벤트는 다르게 동작한다.
| 이벤트 | 데스크톱에서 동작 | 모바일에서 특징 |
|---|---|---|
| mousedown | 요소 위에서 마우스 버튼을 눌렀을 때 발생한다. |
touchstart 이벤트와 유사하다. |
| mousemove | 요소 위에서 마우스를 움직였을 때 발생한다. |
touchmove 이베트와 유사하다. 단, mousemove 이벤트와 다르게 touchmove 이벤트는 touchstart 이벤트가 발생한 이후에 발생한다. |
| mouseup | 요소 위에서 누르고 있던 마우스 버튼을 뗏을 때 발생한다. |
touchend 이벤트와 유사하다. |
| mousewheel | 마우스의 휠을 움직일 때 발생한다. |
overflow:scroll 속성이 있는 곳에서만 이벤트가 발생한다. iOS 5.0부터 이벤트가 발생하고, 안드로이드에서는 이벤트가 발생하지 않는다. |
| mouseover | 요소 위에 마우스 포인터가 있을때 발생한다. |
iOS에서는 요소에 처음으로 포커스가 이동할 때 한 번 발생한다. 안드로이드에서는 요소에 포커스가 이동할 때마다 발생한다. |
마우스 이벤트는 기본적으로 터치 이벤트보다 먼저 발생한다. 그래서 마우스 이벤트에서 이벤트를 중지시키면 뒤에 발생하는 터치 이벤트에도 영향을 미칠 수 있다.
모바일에서 마우스 이벤트와 터치 이벤트가 발생하는 순서는 mouseover 이벤트 -> mousedown 이벤트 -> touchstart 이벤트 -> mousemove 이벤트 -> touchmove 이벤트 -> … -> mouseup 이벤트 순서이다.
키보드 이벤트
데스크톱에는 키보드가 있고, 모바일에는 소프트 키보드가 있다. 소프트 키보드는 입력란이나 주소창을 선택했을 때 화면에 나타난다. 화면에 나타난 소프트 키보드의 배열은 입력란의 유형에 따라 달라진다. 키보드나 소프트 키보드는 데스크톱에서나 모바일에서나 같은 역활으 ㄹ하지만 실제 발생하는 이벤트는 약간 다르다.
모바일에서 키보드 이벤트의 특징은 다음과 같다.
| 이벤트 | 데스크톱에서 동작 | 모바일에서 특징 |
|---|---|---|
| keydown | 사용자가 키를 눌렀을 때 발생한다. |
한글을 입력할 때는 키코드(keyCode)값이 모두 0으로 나타난다. iOS에서는 이벤트가 정상적으로 발생하고, 안드로이드에서는 2.3버전부터 이벤트가 발생한다. |
| keypress | 사용자가 기능키를 제외한 키를 눌렀을 때 발생한다. |
iOS에서는 이벤트가 정상적으로 발생하고, 키코드 값을 정상적으로 반환한다. 안드로이드에서는 4.1 버전부터 이벤트가 발생한다. |
| input | 폼 요소의 값이 변경되면 발생한다. |
iOS에서는 한글을 입력하면서 글자가 만들어 질 때마다 2번씩 발생한다. 예를 들어’손’ 을 입력했을 때 이벤트 발생횟수는 다음과 같다. -ㅅ: 이벤트 1번 발생 -소: 이벤트 3번 발생(이벤트가 2번 더 발생했다) -손: 5번 발생(이벤트가 2번 더 발생했다) 안드로이드에서는 이벤트가 정상적으로 발생한다. |
| keyup | 사용자가 눌렀던 키를 뗏을 때 발생한다. |
keydown 이벤트와 동일하다. |
모바일에서는 대상 이벤트에서 발생하는 키코드 값이 한글일 때도 정상적인 값을 반환하지 못한다. 이는 모바일 운영체제에서 다국어 입력에 대한 고려가 부족한 발생하는 오류로 보인다. 이런 문제는 안드로이드와 iOS에서 모두 나타난다. 국내 기업인 삼성이나 LG에서 만든 안드로이드 폰에서는 이러한 문제가 발생하지 않는다.
모바일에서는 실제 마우스나 키보드가 존재하지 않지만 모바일 브라우저에서는 관련 이벤트가 발생한다. 이는 데스크톱에 근간을 둔 브라우저의 성격으로 인해 발생한 논리적인 문제로 보인다. 아마도 이부분에 대해서는 점차 표준화 작업이 진행될 것으로 보인다. 대표적인 예로, 인터넷 익스플로러 10부터는 Ponter 이벤트가 새로 생겼다. Pinter 이벤트는 포인터를 가리키는 마우스나 터치를 포괄하는 개념의 이벤트다. 실제 Pointer 이벤트는 데스크톱에서는 마우스가 동작할 때 발생하고, 모바일에서는 화면을 터치할 때 발생한다.