jQuery Mobile 頁面事件

jQuery Mobile 頁面事件

在 jQuery Mobile 中與頁面打交道的事件被分為四類：

• Page Initialization - 在頁面創建前，當頁面創建時，以及在頁面初始化之后
• Page Load/Unload - 當外部頁面加載時、卸載時或遭遇失敗時
• Page Transition - 在頁面過渡之前和之后
• Page Change - 當頁面被更改，或遭遇失敗時

jQuery Mobile Initialization 事件

當 jQuery Mobile 中的一張典型頁面進行初始化時，它會經歷三個階段：

• 在頁面創建前
• 頁面創建
• 頁面初始化

每個階段觸發的事件都可用於插入或操作代碼。

事件	描述
pagebeforecreate	當頁面即將初始化，並且在 jQuery Mobile 已開始增強頁面之前，觸發該事件。
pagecreate	當頁面已創建，但增強完成之前，觸發該事件。
pageinit	當頁面已初始化，並且在 jQuery Mobile 已完成頁面增強之后，觸發該事件。

下面的例子演示在 jQuery Mobile 中創建頁面時，何時觸發每種事件：

$(document).on("pagebeforecreate",function(event){
  alert("觸發 pagebeforecreate 事件！");
}); 
$(document).on("pagecreate",function(event){
  alert("觸發 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
  alert("觸發 pageinit 事件！")
});

jQuery Mobile Load 事件

頁面加載事件屬於外部頁面。

無論外部頁面何時載入 DOM，將觸發兩個事件。第一個是 pagebeforeload，第二個是 pageload （成功）或 pageloadfailed（失敗）。

下表中解釋了這些事件：

事件	描述
pagebeforeload	在任何頁面加載請求作出之前觸發。
pageload	在頁面已成功加載並插入 DOM 后觸發。
pageloadfailed	如果頁面加載請求失敗，則觸發該事件。默認地，將顯示 "Error Loading Page" 消息。

下列演示 pageload 和 pagloadfailed 事件的工作原理：

$(document).on("pageload",function(event,data){
  alert("觸發 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被請求頁面不存在。");
});

jQuery Mobile 過渡事件

我們還可以在從一頁過渡到下一頁時使用事件。

頁面過渡涉及兩個頁面：一張“來”的頁面和一張“去”的頁面 - 這些過渡使當前活動頁面（“來的”頁面）到新頁面（“去的”頁面的改變過程變得更加動感。

事件	描述
pagebeforeshow	在“去的”頁面觸發，在過渡動畫開始前。
pageshow	在“去的”頁面觸發，在過渡動畫完成后。
pagebeforehide	在“來的”頁面觸發，在過渡動畫開始前。
pagehide	在“來的”頁面觸發，在過渡動畫完成后。

下列演示了過渡時間的工作原理：

$(document).on("pagebeforeshow","#pagetwo",function(){ // 當進入頁面二時
  alert("頁面二即將顯示");
});
$(document).on("pageshow","#pagetwo",function(){ // 當進入頁面二時
  alert("現在顯示頁面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 當離開頁面二時
  alert("頁面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 當離開頁面二時
  alert("現在隱藏頁面二");
});

 

jQuery Mobile 事件參考手冊

下表列出了所有的 jQuery Mobile 事件。

注釋：請通過使用 on() 方法來綁定事件。

事件	描述
hashchange	啟用 bookmarkable #hash 歷史記錄。
navigate	針對 hashchange 和 popstate 的 wrapper 事件。
orientationchange	當用戶垂直或水平旋轉其移動設備時觸發。
pagebeforechange	在頁面變化周期內觸發兩次：任意頁面加載或過渡之前觸發一次，接下來在頁面成功完成加載后，但是在瀏覽器歷史記錄被導航進程修改之前觸發。
pagebeforecreate	當頁面即將被初始化，但是在增強開始之前觸發。
pagebeforehide	在過渡動畫開始前，在“來源”頁面上觸發。
pagebeforeload	在作出任何加載請求之前觸發。
pagebeforeshow	在過渡動畫開始前，在“到達”頁面上觸發。
pagechange	在 changePage() 請求已完成將頁面載入 DOM 並且所有頁面過渡動畫已完成后觸發。
pagechangefailed	當 changePage() 請求對頁面的加載失敗時觸發。
pagecreate	當頁面已創建，但是增強完成之前觸發。
pagehide	在過渡動畫完成后，在“來源”頁面觸發。
pageinit	當頁面已經初始化並且完成增強時觸發。
pageload	在頁面成功加載並插入 DOM 后觸發。
pageloadfailed	如果頁面加載請求失敗，則觸發。
pageremove	在窗口視圖從 DOM 中移除外部頁面之前觸發。
pageshow	在過渡動畫完成后，在“到達”頁面觸發。
scrollstart	當用戶開始滾動頁面時觸發。
scrollstop	當用戶停止滾動頁面時觸發。
swipe	當用戶在元素上水平滑動時觸發。
swipeleft	當用戶從左划過元素超過 30px 時觸發。
swiperight	當用戶從右划過元素超過 30px 時觸發。
tap	當用戶敲擊某元素時觸發。
taphold	當元素敲擊某元素並保持一秒時觸發。
throttledresize	啟用 bookmarkable #hash 歷史記錄
updatelayout	由動態顯示/隱藏內容的 jQuery Mobile 組件觸發。
vclick	虛擬化的 click 事件處理器
vmousecancel	虛擬化的 mousecancel 事件處理器
vmousedown	虛擬化的 mousedown 事件處理器
vmousemove	虛擬化的 mousemove 事件處理器
vmouseout	虛擬化的 mouseout 事件處理器
vmouseover	虛擬化的 mouseover 事件處理器
vmouseup	虛擬化的 mouseup 事件處理器