jQuery Mobile のページを処理するイベントは、次の4つのカテゴリに分類されます：
jQuery Mobile イベントすべての完全なリファレンスは、 jQuery Mobile イベント・リファレンスをご覧ください。
jQuery Mobile の典型的なページの初期化は、次の 2つのステージで実行されます：
各ステージには、jQuery Mobile がページを拡張する前か拡張するときに、コードの挿入や操作に使用できるイベントがあります。
| イベント | 説明 |
|---|---|
| pagebeforecreate | ページが初期化されようとしているとき、および jQuery Mobile がページの拡張を開始する前にトリガされる |
| pagecreate | ページは作成されたが、拡張が完了する前にトリガーされる |
下の例は、jQuery Mobile でページが作成されたときに、いつ各イベントが発火するかを示しています：
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
});
Try it Yourself »ページ・ロード・イベントは外部ページ用です。
外部ページが DOM にロードされるたびに、2 つのイベントが発火します。最初は、pagecontainerbeforeload で、 2 番目は pagecontainerload（成功）か pagecontainerloadfailed（失敗）のいずれかです。
下の表に、これらのイベントを説明します：
| イベント | 説明 |
|---|---|
| pagecontainerbeforeload | ページロード要求が行われる前にトリガーされる |
| pagecontainerload | ページが正常にロードされて、DOM に挿入された後にトリガーされる |
| pagecontainerloadfailed | ページロード要求が失敗した場合にトリガーされる。 デフォルトでは、"Error Loading Page" というメッセージが表示される |
下の例は、pagecontainerload イベントと pagecontainerloadfailed イベントがどのように機能するかを示しています：
$(document).on("pagecontainerload",function(event,data){
alert("pageload event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
});
Try it Yourself »あるページから次のページへ遷移するときにイベントを使用することもできます。
ページ遷移には、"from" ページと "to" ページの 2 つのページが含まれます - これらの遷移は、現在のアクティブページ（fromPage）から 新しいページ（toPage）への変更をアニメートします。
| イベント | 説明 |
|---|---|
| pagebeforeshow | 遷移アニメーションが始まる前に、"to" ページでトリガされる |
| pageshow | 遷移アニメーションが完了した後に、"to" ページでトリガされる |
| pagebeforehide | 遷移アニメーションが始まる前に、"from" ページでトリガされる |
| pagehide | 遷移アニメーションが完了した後に、"from" ページでトリガされる |
下の例は、遷移イベントがどのように動作するかを示しています：
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("pagetwo is now hidden");
});
Try it Yourself »