jQuery Mobile イベントの概要とイベントリスト

公開日：2014年10月25日
最終更新日：2014年11月8日

jQuery Mobile ではさまざまなタイミングで発生するカスタムイベントを用意しています。この記事では jQuery Mobile でイベントを利用するための基本的事項と、用意しているイベントのリストを示します。

«次の特集記事» jQuery Mobile ページイベントの種類・発生タイミングと利用例
«前の特集記事» jQuery Mobile セレクトメニューを設置する

jQuery Mobile 特集記事一覧

【コンテンツ】

イベントの概要
イベントリスト

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

イベントの概要

JavaScript を扱う上ではイベントは欠かすことができない要素です。
jQuery Mobile では標準の jQueryイベントを使うことができますが、その他さまざまなタイミングで発生するカスタムイベントを用意しています。

カスタムイベントの種類としては、ページイベント、タッチイベント、スクロールイベント、仮想マウスイベントなどがあり、環境によって存在するものだけが呼び出されます。

バインドする際の書式

$('.selector').on('イベント', function(event, ui) {
		// 処理を記述
});

$('.selector').on('イベント', function(event, ui) {

// 処理を記述

});

jQueryの初期化処理 $(document).ready() との関係

jQueryではロードが終わったときの初期化処理は、「$(document).ready()」に記述します。
もちろん jQuery Mobile でもこのreadyイベントを利用することはできます。

しかし readyイベントは最初のページを開いたときにしか発生しないため、Ajax によりコンテンツが DOM に追加される jQuery Mobile では初期化が行われないこともあります。
したがって新しいページが読み込まれた際に毎回処理を実行したい場合は、
常に発生する pagecreateイベントにバインドします。

$(document).on('pagecreate', '#page-id', function(event) {
	//処理を記述
});

$(document).on('pagecreate', '#page-id', function(event) {

//処理を記述

});

【注意！】
初期化処理としては pageinitイベントを使うと記載している記事や書籍もあるのですが、
pageinitイベントはバージョン1.4.0 で非推奨になっています。

イベントリスト

イベント	説明
hashchange	ハッシュを変更したときに発生する。
mobileinit	jQuery Mobile のロードが終わった時点で発生する。グローバル設定の変更処理はこのイベントにバインドする。
navigate	ハッシュ変更時の hashchangeイベントと、戻るボタンクリック時の popstateイベントを統合したイベント。バージョン1.3.0 で追加された。
orientationchange	端末の向きを変えたときに発生する。
pagebeforechange	ページロードあるいはページ遷移前と、ページロードが成功して完了した後の２回発生する。このイベントはバージョン1.4.3 で非推奨。代替は Pagecontainerウィジェットの pagecontainerbeforechangeイベント。
pagebeforecreate	ほとんどのプラグインの自動初期化の前、ページ初期化処理の最初に発生する。
pagebeforehide	現在表示されているページ上で、遷移アニメーションが実行される前に発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerbeforehideイベント。
pagebeforeload	ページロード前に発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerbeforeloadイベント。
pagebeforeshow	これから遷移するページ上で、遷移アニメーションが実行される前に発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerbeforeshowイベント。
pagechange	DOMにページが挿入され、遷移アニメーションが完了したときに発生する。このイベントはバージョン1.4.3 で非推奨。代替は Pagecontainerウィジェットの pagecontainerchangeイベント。
pagechangefailed	ページ遷移に失敗したときに発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerchangefailedイベント。
pagecreate	Ajaxであるかどうかにかかわらず、ページがDOMに生成されたときに発生する。
pagehide	現在表示されているページ上で、遷移アニメーションが完了したときに発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerhideイベント。
pageinit	ページの初期化終了時に発生する。このイベントはバージョン1.4.0 で非推奨。代替は pagecreateイベント。
pageload	ページロードが成功して完了し、DOMに挿入されたときに発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerloadイベント。
pageloadfailed	ページロードに失敗したときに発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainerloadfailedイベント。
pageremove	DOMからページが削除される直前に発生する。このイベントはバージョン1.4.3 で非推奨。代替は Pagecontainerウィジェットの pagecontainerremoveイベント
pageshow	これから遷移するページ上で、遷移アニメーションが完了したときに発生する。このイベントはバージョン1.4.0 で非推奨。代替は Pagecontainerウィジェットの pagecontainershowイベント。
scrollstart	スクロールを開始したときに発生する。
scrollstop	スクロールを停止したときに発生する。
swipe	１秒以内に水平方向に30px以上(垂直方向は75pxより少なく)ドラッグしたときに発生する。
swipeleft	左方向へのスワイプで発生する。
swiperight	右方向へのスワイプで発生する。
tap	タップ(素早いタッチ)したときに発生する。
taphold	750msec以上続けてタッチしたときに発生する。
throttledresize	ウィンドウがリサイズされたときに発生する。
updatelayout	動的にコンテンツの表示/非表示を行うフレームワーク内のコンポーネントにより発生される。
vclick	モバイル端末上で、onclickイベントをシミュレートするイベント。
vmousecancel	スクロールなどにより仮想マウスイベントがキャンセルされたときに発生する。
vmousedown	モバイル端末上で、onmousedownイベントをシミュレートするイベント。
vmousemove	モバイル端末上で、onmousemoveイベントをシミュレートするイベント。
vmouseout	モバイル端末上で、onmouseoutイベントをシミュレートするイベント。
vmouseover	モバイル端末上で、onmouseoverイベントをシミュレートするイベント。
vmouseup	モバイル端末上で、onmouseupイベントをシミュレートするイベント。