画面遷移イベントの流れ

画面遷移イベントの流れ

画面を読み込んだ後なら
日付を表示するコンポーネント
入力値のチェックをするコンポーネントを動的に押し込む

画面を表示した後なら
ポップアップアニメーション開始、
位置情報取得開始

画面を非表示にする前や、画面遷移する前なら
アニメーション停止、
位置情報取得の終了など

流れとしては、画面遷移スタートで
pagebeforechangeイベント

DOMがロードされ
pagebeforecreate発生して
pagecreate

ウィジェット初期化してから
pageinit

そして
pageload

次に、pagebeforechange
ここまで元画面

pagebeforehideて元画面をかくして
pagebeforeshowで次画面表示

pageremoveで元画面のDOM削除

pagehideでかくして
pageshowで表示

pagechangeで画面切り替え

となる

画面遷移字に発生するイベントは大きく分けて3つ

すべての画面遷移で呼び出されるグローバルイベント
pagebeforechange
pagebeforeload
pageload
pagebeforechange
pagechange

遷移元の画面で発生するイベント
pagebeforehide
pageremove
pagehide

遷移先の画面で発生するイベント
pagebeforecreate
pagecreate
pageinit
pagebeforeshow
pageshow

となる

イベントが発生するフェーズに分けると

次のHTML画面の読み込みフェーズ
pagebeforeload
pagebeforecreate
pagecreate
pageinit
pageload

画面の遷移フェーズ
pagebeforechange
pagebeforehide
pagebeforeshow
pageremove
pagehide
pageshow
pagechange

の2つのフェーズになる

また
条件により実行されるイベントがある

次画面の読み込みフェーズは
画面かDOMにキャッシュされているとき実行されない

jQueryMobileによるWebアプリやサイトのトップページは必ずキャッシュされるため

pagebeforeload
pagebeforecreate
pagecreate
pageinit
pageload

は最初の1回のみ実行される

DOMにキャッシュする画面では
画面遷移時に
pageremove
は発生しない