jQuery Mobile 페이지 이벤트

jQuery Mobile 페이지 이벤트

jQuery Mobile에서 페이지와 관련된 이벤트는 네 가지 유형으로 분류됩니다:

  • 페이지 초기화 - 페이지가 생성되기 전, 페이지가 생성될 때, 그리고 페이지가 초기화된 후
  • 페이지 로드/언로드 - 외부 페이지가 로드되거나, 로드되지 않거나, 실패할 때
  • 페이지 전환 - 페이지 전환 전 후
  • 페이지 변경 - 페이지가 변경되거나 실패할 때

모든 jQuery Mobile 이벤트에 대한 전체 정보를 필요로 하시면, 우리의 jQuery Mobile 이벤트 참조 매뉴얼。

jQuery Mobile Initialization 이벤트

jQuery Mobile에서 일반 페이지가 초기화될 때, 그것은 세 단계를 거쳐갑니다:

  • 페이지 생성 전에
  • 페이지 생성
  • 페이지 초기화

각 단계에서 발생하는 이벤트는 코드를 삽입하거나操作할 수 있습니다.

이벤트 설명
pagebeforecreate 페이지가 초기화되기 전에, jQuery Mobile가 페이지를 강화하기 시작하기 전에 이 이벤트가 발생합니다.
pagecreate 페이지가 생성되었지만 강화가 완료되기 전에 이 이벤트가 발생합니다.
pageinit 페이지가 초기화되고, jQuery Mobile가 페이지 강화를 완료한 후 이 이벤트가 트리거됩니다.

jQuery Mobile에서 페이지를 생성할 때 각 이벤트가 언제 트리거되는지 보여주는 예제가 다음과 같습니다：

예제

$(document).on("pagebeforecreate",function(event){
  alert("pagebeforecreate 이벤트가 트리거되었습니다!");
}); 
$(document).on("pagecreate",function(event){
  alert("pagecreate 이벤트가 트리거되었습니다!");
});
$(document).on("pageinit",function(event){
  alert("pageinit 이벤트가 트리거되었습니다!");
});

직접 시도해보세요

jQuery Mobile 로드 이벤트

페이지 로드 이벤트는 외부 페이지에 belongs.

외부 페이지가 언제든지 DOM에 로드될 때마다 두 이벤트가 트리거됩니다. 첫 번째는 pagebeforeload이고, 두 번째는 pageload（성공） 또는 pageloadfailed（실패）입니다.

이 테이블에서 이 이벤트를 설명합니다：

이벤트 설명
pagebeforeload 모든 페이지 로드 요청이 이루어지기 전에 트리거됩니다.
pageload 페이지가 성공적으로 로드되고 DOM에 삽입된 후 트리거됩니다.
pageloadfailed 페이지 로드 요청이 실패하면 이 이벤트가 트리거됩니다. 기본적으로 "Error Loading Page" 메시지가 표시됩니다.

pageload과 pageloadfailed 이벤트의 작동 원리를 보여주는 예제가 다음과 같습니다：

예제

$(document).on("pageload",function(event,data){
  alert("pageload 이벤트가 트리거되었습니다！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("죄송합니다, 요청된 페이지가 존재하지 않습니다.");
});

직접 시도해보세요

jQuery Mobile 전환 이벤트

이벤트를 사용하여 페이지에서 페이지로 이동할 때도 사용할 수 있습니다.

페이지 전환은 두 페이지를 포함합니다: 하나의 “오는” 페이지와 하나의 “가는” 페이지 - 이 전환은 현재 활성 페이지（“오는” 페이지）에서 새 페이지（“가는” 페이지로의 변화 과정을 더욱 생동감 있게 만듭니다.

이벤트 설명
pagebeforeshow “가는” 페이지에서 트리거되고, 전환 애니메이션 시작 전.
pageshow “가는” 페이지에서 트리거되고, 전환 애니메이션이 완료된 후.
pagebeforehide “오는” 페이지에서 트리거되고, 전환 애니메이션 시작 전.
pagehide “오는” 페이지에서 트리거되고, 전환 애니메이션이 완료된 후.

이전 시간 작동 원리를 보여주는 예제가 다음과 같습니다：

예제

$(document).on("pagebeforeshow","#pagetwo",function(){ // 페이지 이 진입할 때
  alert(" 페이지 두 번째가 표시될 준비 중 ");
});
$(document).on("pageshow","#pagetwo",function(){ // 페이지 이 진입할 때
  alert("현재 페이지 이 이제 보여집니다");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 페이지 이 이탈할 때
  alert("페이지 이 이제 숨겨질 예정입니다");
});
$(document).on("pagehide","#pagetwo",function(){ // 페이지 이 이탈할 때
  alert("현재 페이지 이 이제 숨겨져 있습니다");
});

직접 시도해보세요