Javascript Mobile Event Step

JavaScript 모바일 이벤트 발생 순서

프론트엔드 개발에서 이벤트 발생 순서를 이해하고 개발하는 것은 굉장히 중요하다. 특히 운영체제와 제조사별로 조금씩 다르게 처리되는 모바일에서는 더욱 중요하다. 여기서는 일반적인 이벤트 발생 순서를 알아본다.

선택이벤트(touch, scroll, mouse, click)

touch 이벤트와 scroll 이벤트, mouse 이벤트, click 이벤트는 사용자가 대상을 선택하고, 이동하고, 선택을 해지 했을 때 발생하는 이벤트다. 이 이벤트는 iOS와 안드로이드에서 다르게 작동한다.

오른쪽 iOS에서 touchstart 이벤트부터 click 이벤트가 발생하는 순서를 나타내는 그림이다.

iOS에서 선택 이벤트의 발생순서

[touchstart]
↓
< 스크롤은 하는가? >
↓
[touchmove]
↓
< 손을 뗏는가? >
↓
[touchend]
↓
< 스크롤 했는가? >
↓
[scroll](예)
↓
[click](아니오)

touchstart 이벤트가 발생한 다음 스크롤이 있으면 스크롤하는 동안 touchmove 이벤트가 발생한다. 터치를 마치고 touchend 이벤트가 발생하면 스크롤이 있었을 경우 scroll 이벤트가 발생한 다음 click 이벤트가 발생한다. 스크롤이 없었다면 touchend 이벤트 발생 이후 바로 click 이벤트가 발생한다.

다음은 안드로이드에서 touchstart 이벤트부터 click 이벤트가 발생하는 순서를 나타낸 그림이다.

안드로이드에서 선택 이벤트의 발생순서

[touchstart]
↓
< 스크롤은 하는가? >
↓
[touchmove]
↓
[scroll]
↓
< 손을 뗏는가? >
↓
[touchend]
↓
[click]

touchstart 이벤트가 발생한 다음 스크롤이 있으면 스크롤하는 동안 touchmove 이벤트와 scroll 이벤트가 발생한다. 터치를 마치면 touchend 이벤트와 click 이벤트가 발생한다.

폼 요소 선택 이벤트(touch, focus)

사용자가 폼 요소를 선택했을 때 발생하는 이벤트다. 이벤트는 iOS와 안드로이드에서 다르게 작동한다.

아쪽은 iOS에서 touchstart 이벤트부터 focus 이벤트가 발생하는 순서를 나타낸 그림이다.

폼 요소를 눌렀다 떼면 touchstart 이벤트와 touchend 이벤트가 발생한다. 폼 요소를 처음 눌렀다면 focus 이벤트가 발생한다. 폼 요소를 처음 눌렀다면 focus 이벤트가 발생하고 소프트 키보드가 나타난다. iOS에서는 소프트 키보드가 나타나면 scroll 이벤트도 발생한다.

**iOS에서 폼 요소 선택 이벤트의 발생 순서 **

( 시작 )
↓
[touchstart]
↓
[touchend]
↓
< 처음 선택했는가? > - 아니오 → ( 종료 )
|
예
↓
[focus]
↓
[소프트 키보다가 보이면서 scroll]

다음은 안드로이드에서 touchstart 이벤트부터 focus 이벤트가 발생하는 순서를 나타낸 그림이다.

안드로이드에서 폼 요소 선택 이벤트의 발생 순서

( 시작 )
↓
< 처음 선택했는가? > - 아니오 → ( 종료 )
↓
[touchstart]
↓
[touchend]
↓
[focus]
↓
[focus]

폼 요소를 처음 눌렀다 떼면 touchstart 이벤트, touchend 이벤트, focus 이벤트 순서로 이벤트가 발생한다. 한 가지 주의할 점은 안드로이드에서는 버전에 따라 입력상자(input, textarea)에서 focus 이벤트가 두 번 발생하는 오류가 있다는 것이다.

모바일 환경에서는 브라우저의 종류, 운용체제의 버전, 제조사, 모바일 기기의 종류에 따라 이벤트가 다르게 작동한다. 이러한 동작 유형을 정확히 파악하고 있어야 다양한 운영체제와 기기에서 동일한 기능과 동일한 인터페이스를 제공할 수 있다.