jquery mobile - 페이지 이벤트( 로드, 초기화, 제거, 트랜지션)

페이지 로드 이벤트

페이지 로드 이벤트는 웹앱 DOM에 외부 페이지가 통합될 때 발생한다.

통합되기 바로 직전에 pagebeforeload 이벤트가 발생 , 통합이 성공되면 pageload 이벤트가 발생 , 실패되면 pageloadfaild 이벤트가 발생 , pageloadfailed 이벤트는 서버 접속 에러 또는 서버 실행 에러가 났을 때 발생한다.

$(document).bind("mobileinit", function(){      $(document).bind("pagebeforeload", function(event,data){      });          $(document).bind("pageload", function(event,data){      });      $(document).bind("pageloadfailed", function(event,data){      });   });

 

페이지 초기화 이벤트

jQuery Mobile은 웹앱에서 페이지를 초기화 할 수 있도록 초기화 이벤트를 제공한다. 페이지 초기화 이벤트는 pagebeforecreate, pagecreate, pageinit 이 있다. 이들 이벤트는 페이지 로드 이벤트인 pagebeforeload와 pageload 이벤트 사이에서 발생한다.

pagebeforecreate 이벤트는 jQuery 컴포넌트가 초기화 되기 전에 발생한다. pagecreate는 페이지가 DOM에 통합되면 발생하는데, 주로 사용자 정의 컴포넌트를 생성하거나 코드가 핸들러에 작성된다.  pageinit 이벤트는 페이지의 모든 컴포넌트가 초기화가 되었을때 발생한다.

주고 AJAX로 받아온 데이터를 페이지의 내용으로 넣는 코드가 핸들러에 작성된다. 

$(document).bind("mobileinit", function(){      $("#secondPage").live("pagebeforecreate", function(event){      });      $("#secondPage").live("pagebecreate", function(event){      });      $("#secondPage").live("pagebeinit", function(event){      });   });

이벤트 핸드러를 bind() 메소드를 등록하지 않고, live() 메소드를 등록하는 이유는 아직 두번째 페이지가 DOM에 통합되지 않은 상태에서 핸들러를 먼저 등록하기 위해서이다. live() 메소드는 해당 객체가 앞으로 생성될 것을 예측하고 이벤트를 바인딩한다. 미래에 존재할 것을 대비해서 미리 이벤트 핸들러 바인딩 시키고자 할 경우에 사용한다.

 

페이지 제거 이벤트

기본적으로 jQuery Mobile 은 DOM에 추가된 외부 페이지가 다른 페이지로 이동할 때 DOM에서 제거해 버린다.

예를 들어 홈 페이지에서 외부 두 번째 페이지로 이동하고 다시 홈 페이지로 돌아올 경우 외부 두 번째 페이지는 DOM에서 제거 된다. 이때 제거 되기 바로 직전에 pageremove 이벤트가 발생한다. 주로 페이지가 제거되기 전에 데이터를 보존하기 위한 코드가 핸들러에 작성된다. 

$(document).bind("mobileinit", function(){    $("#secondPage").live("pageremove",function(event){    });   });

 

페이지 트랜지션 이벤트

페이지 트랜지션 이벤트는 페이지 이동시 발생한다. 현재 페이지에서는 pagebeforehide, pagehide가 발생하고 다음 페이지에서는 pagebeforeshow, pageshow 이벤트가 발생한다.

웹앱이 시작되면 홈페이지는 pagebeforeshow, pageshow가 발생한다. 홈페이지에서 두번째 페이지로 이동하면 홈페이지에서 pagebeforehide, pagehide가 발생하고, 두번째 페이지는 pagebeforeshow, pageshow 이벤트가 발생한다. 

$(document).bind("mobileinit", function(){      $("#homePage").live("pagebeforeshow", function(event, ui){      });      $("#homePage").live("pageshow", function(event, ui){      });      $("#homePage").live("pagebeforehide", function(event, ui){      });      $("#homePage").live("pagehide", function(event, ui){      });   });

페이지 트랜지션 이벤트 핸들러의 두번째 매 개값인 ui 객체는 이전 페이지와 다음 페이지에 대한 정보를 가지고 있다. 현재 페이지는 nextPage 속성으로 다음 페이지에 대한 정보를 얻을 수 있고, 다음 페이지는 prevPage 속성으로 이전 페이지에 대한 정보를 얻을 수 있다.

출처 - http://ygang.tistory.com/m/post/view/id/105