# jQuery Mobile 頁面事件 ## jQuery Mobile 頁面事件 在 jQuery Mobile 中與頁面打交道的事件被分為四類： * Page Initialization - 在頁面創建前，當頁面創建時，以及在頁面初始化之后 * Page Load/Unload - 當外部頁面加載時、卸載時或遭遇失敗時 * Page Transition - 在頁面過渡之前和之后 * Page Change - 當頁面被更改，或遭遇失敗時 如需關于所有 jQuery Mobile 事件的完整信息，請訪問我們的 [jQuery Mobile 事件參考手冊](jquerymobile-ref-events.html "jQuery Mobile 事件")。 ## 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(){ // When leaving pagetwo ? alert("現在隱藏頁面二"); }); ```