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

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

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

【コンテンツ】

  1. イベントの概要
  2. イベントリスト

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

イベントの概要

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

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

バインドする際の書式

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

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

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

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

イベントリスト

イベント 説明
hashchange ハッシュを変更したときに発生する。
mobileinit jQuery Mobile のロードが終わった時点で発生する。グローバル設定の変更処理はこのイベントにバインドする。
navigate ハッシュ変更時の hashchangeイベントと、戻るボタンクリック時の popstateイベントを統合したイベント。バージョン1.3.0 で追加された。
orientationchange 端末の向きを変えたときに発生する。
pagebeforechange ページロードあるいはページ遷移前と、ページロードが成功して完了した後の2回発生する。
このイベントはバージョン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 1秒以内に水平方向に30px以上(垂直方向は75pxより少なく)ドラッグしたときに発生する。
swipeleft 左方向へのスワイプで発生する。
swiperight 右方向へのスワイプで発生する。
tap タップ(素早いタッチ)したときに発生する。
taphold 750msec以上続けてタッチしたときに発生する。
throttledresize ウィンドウがリサイズされたときに発生する。
updatelayout 動的にコンテンツの表示/非表示を行うフレームワーク内のコンポーネントにより発生される。
vclick モバイル端末上で、onclickイベントをシミュレートするイベント。
vmousecancel スクロールなどにより仮想マウスイベントがキャンセルされたときに発生する。
vmousedown モバイル端末上で、onmousedownイベントをシミュレートするイベント。
vmousemove モバイル端末上で、onmousemoveイベントをシミュレートするイベント。
vmouseout モバイル端末上で、onmouseoutイベントをシミュレートするイベント。
vmouseover モバイル端末上で、onmouseoverイベントをシミュレートするイベント。
vmouseup モバイル端末上で、onmouseupイベントをシミュレートするイベント。

イベント・オブジェクト・メソッド・プロパティなどプログラミング的要素は、デザインを中心にWeb制作している人間にとっては理解しづらいものがあります。しかし動的なスマートフォンサイトを制作するにはここらへんの知識は必須ですので、頑張って勉強していくしかないですね。

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

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ