jQuery Mobile Event API

jQuery Mobile 은 여러가지의 사용자 이벤트를 제공합니다. 이런 이벤트에는 다양한 터치와, 마우스, 윈도우 이벤트들이 있는데 모바일 환경 및 데스크탑 환경에서도 사용할 수 있도록 바인딩 할 수 있습니다. Live()와 bind()를 사용해 jQuery 이벤트를 다루듯이 이러한 이벤트들을 바인드 할 수 있습니다.

Touch events
Tap
 원 터치시 touch 이벤트가 발생합니다.
Taphold
 터치 후 약 1초간 유지할 경우 이벤트가 발생합니다.
Swipe
 1초 동안 30px이상 수평으로 드래그 할 경우 이벤트가 발생합니다.
Swipeleft
 왼쪽 방향으로 swipe이 발생하는 경우
swiperight
 오른쪽 방향으로 swipe이 발생하는 경우
 
Orientation change event
모바일 디바이스에서 orientation을 변경할 때 발생하는 이벤트입니다. 이 이벤트를 바인딩할 때 두번째 인수에 callback 함수를 활용할 수 있습니다. 그리고, orientation property에는 ‘portait’또는 ‘landscape’와 동등한 속성을 포함하고 있습니다. 이 값은 css의 선택자에서 활용할 수 있도록 HTML 요소에 클래스로 추가됩니다. orientationChange가 기본적으로 지원되지 않을 때 reize 이벤트를 바인드 하여 사용합니다.
 
Scroll event
Scroll start
스크롤이 시작되면 이벤트가 발생됩니다. ISO 에서는 스크롤 동안 DOM조작이 멈추고, 스크롤 동작이 끝나면 적용하기 위해 큐에 담아 놓습니다. 현재, 스크롤이 시작되기 전에 동작할 수 있는 방법을 찾고 있다고 합니다.
Scrollstop
스크롤이 끝나면 이벤트가 발생됩니다.
 
Page show/hide events
페이지가 JQM에서 보여지고 사라질 때, 두개의 이벤트가 발생됩니다. 이 이벤트들은 페이지가 보여지고, 사라질때 독립적으로 발생합니다. 그래서, 페이지가 전환될 때 각 페이지당 2개의 이벤트씩 총 4개의 이벤트가 발생됩니다.
 
Pagebeforeshow : 페이지 전환이 시작될 때 페이지가 보여지면 발생합니다.
Pagebeforehide: 페이지 전환이 시작될 때 페이지가 사라지면 발생합니다.
Pageshow: 페이지 전환이 완료된 후 페이지가 보여질 때 발생합니다.
Pagehide: 페이지 전환이 완료된 후 페이지가 사라질 때 발생합니다.

이 4가지 이벤트는 페이지가 보여지고 사라지는 여부에 따라, 이전페이지와 다음페이지가 존재하는 가에 따라, 다음페이지(nextPage)와 이전페이지(prevpage)중 하나의 참조를 갖게 됩니다. (최초 페이지는 이전 페이지에 대한 정보가 없지만, jQuery object는 동일하게 동작합니다.). 이러한 참조는 callback함수의 두번째 인수를 통해 접근 가능합니다.
 
$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});
 
$('div').live('pagehide',function(event, ui){
  alert('This page was just shown: '+ ui.nextPage);
});
 
또한, 초기 페이지가 로드되는 동안 이러한 핸들러를 등록하기 위해, jQuery Mobile을 실행하기 전에 바인드 해야 합니다. 페이지에 글로벌 설정을 위해 mobileint 핸들러를 사용하면 됩니다.
 
Page initialization events 
내부적으로 JQM은 페이지의 마크업 규칙에 따라 플러그인을 자동으로 초기화 합니다. 예를 들어, range타입의 input 태그는 사용자 슬라이드로 보여지게 됩니다.
이런 자동 초기화는 페이지 플러그인을 통해 컨트롤 됩니다. 초기화가 실행되기 전,후에 이벤트가 등록되고, 페이지 조작이 허용됩니다. 개발자가 인위적으로 초기화를 할 수도 있으며 자동으로 초기화 되는 것을 방지할 수도 있습니다. 이러한 이벤트는 페이지가 보여지고, 사라지는 순간마다 발생하는 show/hide 이벤트와 반대로 페이지당 한번만 발생하게도 가능합니다.
 
Pagebeforecreate : JQM에서 마크업을 변환시키기 전에 이벤트가 발생합니다.
Pagecreate : JQM에서 마크업을 변환시킨 후 이벤트가 발생합니다.
('#aboutPage').live('pagebeforecreate',function(event){
  alert('This page was just inserted into the dom!');
});
 
$('#aboutPage').live('pagecreate',function(event){
  alert('This page was just enhanced by jQuery Mobile!');
});
 
pagebeforecreate가 바인딩 될 때 false를 리턴하면, page plugin이 조작되는 것을 방지할수 있습니다.
$('#aboutPage').live('pagebeforecreate',function(event){
  //run your own enhancement scripting here...
  return false;
});
 
animation events
jQuery Mobile은 css 전환을 적용하는 class를 추가하거나 제거한 후에 활용할 수 있는 animationComplete 플러그인을 제공합니다.