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 事件處理器