jQuery Mobile ページイベントの種類・発生タイミングと利用例

ページロード時や遷移時に発生するページイベントは、jQuery Mobile のイベントの中で最も重要です。種類も多くバージョンによって頻繁に仕様が変わるので理解するのがたいへんですが、現時点での種類と発生タイミングを整理してみます。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. ページイベントの概要
  2. 非推奨になったイベントと今後利用が望ましいイベント
  3. ページロード時/遷移時/リターン時/エラー時でのイベント発生順序
  4. ページイベントを利用した処理の記述例

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

ページイベントの概要

ページを最初にロードしたときやページ遷移のときに、何か独自の処理を組み込みたいということがあります。そのために jQuery Mobile ではいくつかのページイベントを用意しています。

ページイベントを利用すると、サイト全体に共通の処理を加えることもできますし、特定のページだけを対象にすることもできます。

ただページイベントは種類も多いので、処理内容によって適切に使い分ける必要があります。
前回の記事でも触れたように、ページ初期化処理は ウィジェットの初期化が完了しページがDOMに生成されたときに発生する pagecreateイベントを基本として使います。そして思うような結果にならない場合に他のイベントの利用を考えます。そのために各イベントの発生する順番とタイミングを把握しておいてください。

共通処理の記述方法

サイト全体に共通の処理を追加する場合は、documentオブジェクトに対してonメソッドを適用し以下のように記述します。bind, live, delegateメソッドはすべて onメソッドに統一されましたので、今後は onメソッドを使うようにしましょう。

コールバック関数の第1引数はeventオブジェクトで、第2引数は uiオブジェクトです。
それらのオブジェクトを介してページURLやオプションなどを参照することができます。
どのようなプロパティが利用できるかは、
API Documentation の「Page Widget」と「Pagecontainer Widget」に記載されています。

個別処理の記述方法

特定のページだけに処理を適用したい場合は、onメソッドの第2引数にページ要素のidを指定します。
ただしこの構文がうまく動作しないイベントもありますので、その場合は処理内で要素を特定し条件分岐させるとよいでしょう。

非推奨になったイベントと今後利用が望ましいイベント

ページイベントはバージョン1.4で多くのものが非推奨になっています。
以下の表はこれまでのイベントと今後利用が望ましいイベントを発生順に並べたものです。

はバージョン1.4で非推奨 pagebeforechange/pagecontainerbeforechangeは2回発生

発生タイミング これまでのイベント 今後利用が望ましいイベント
ページ変更前 pagebeforechange pagecontainerbeforechange
ページロード前 pagebeforeload pagecontainerbeforeload
ページロード完了後 pageload pagecontainerload
ページ初期化前 pagebeforecreate pagebeforecreate
ページ初期化後 pagecreate pagecreate
ページ初期化完了後 pageinit
ページ初期化完了後 pagebeforechange pagecontainerbeforechange
前ページの非表示前 pagebeforehide pagecontainerbeforehide
次ページの表示前 pagebeforeshow pagecontainerbeforeshow
DOMから前ページの削除後 pageremove pagecontainerremove
前ページの非表示後 pagehide pagecontainerhide
次ページの表示後 pageshow pagecontainershow
ページ変更後 pagechange pagecontainerchange
ページロード失敗時 pageloadfailed pagecontainerloadfailed
ページ変更失敗時 pagechangefailed pagecontainerchangefailed

ページロード時/遷移時/リターン時/エラー時でのイベント発生順序

初期のページロード時、ページ遷移時、遷移先からのリターン時、エラー時でそれぞれどのイベントが発生するか異なります。厳密に言えば、1ファイルに複数ページを記述した場合やキャッシュを有効にしている場合など条件によっても異なります。

以下は最初にメインのページをロードし、別のHTMLファイルのページに遷移する際に発生するイベントを示した表です。今後利用が望ましいイベントを発生順に並べています。

イベント ページ初期
ロード時
ページ
遷移時
遷移先から
リターン
エラー
発生時
pagecontainerbeforechange
pagecontainerbeforeload
pagecontainerload
pagebeforecreate
pagecreate
pagecontainerbeforechange
pagecontainerbeforehide
pagecontainerbeforeshow
pagecontainerremove
pagecontainerhide
pagecontainershow
pagecontainerchange
pagecontainerloadfailed
pagecontainerchangefailed

ページイベントを利用した処理の記述例

どのタイミングでイベントが発生するか確認する

pagecontainerload, pagebeforecreate, pagecontainerbeforehide, pagecontainerchange 4つのイベントが、どういうケースでどのタイミングで発生するか確認するコードです。

初期ロード時、ページ遷移時、リターン時でそれぞれ発生するイベントが違います。

ウィジェットにデータ属性を追加する

ヘッダーとフッターに「data-theme="b"」を追加してみます。
ウィジェットに反映させたいので、pagebeforecreateイベントのタイミングで処理を行います。フレームワークはこの後でウィジェットに対してさまざまな属性やクラスを付加します。

ウィジェットのオプションを変更する

上記のヘッダーとフッターのテーマを "b" にしたのは、ツールバーの themeオプションを変更することでも実現できます。
その場合は、pagecreateイベントのタイミングで以下の処理を記述します。

ページイベントはバージョン1.4になって多くのものが非推奨になりました。プログラミングが必要なところはただでさえ動作がシビアで分かりづらいのに、利用者は混乱してしまいますね。次のバージョンではFIXすることを望みます。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ