jQuery-mobile 學習筆記之三（事件監聽）

續上

觸摸事件 - 當用戶觸摸屏幕時觸發（敲擊和滑動）
滾動事件 - 當上下滾動時觸發
方向事件 - 當設備垂直或水平旋轉時觸發
頁面事件 - 當頁面被顯示、隱藏、建立、載入以及/或卸載時觸發

1、初始化事件

1. ready 事件 頁面載入完畢

$(document).ready(function(){
    //your code here...
});

2. 頁面載入完畢事件二 pageinit

$(document).on('pageinit','#pageone',function(){
    //your code here...
});

3.事件格式

$(元素).on('事件',funciton(){
   //code here...
})

2、觸摸事件

tap          事件在用戶敲擊某個元素時觸發
taphold      事件在用戶敲擊某個元素並保持一秒時被觸發
swipe        事件在用戶在某個元素上水平滑動超過 30px 時被觸發
swipeleft    事件在用戶在某個元素上從左滑動超過 30px 時被觸發
swiperight   事件在用戶在某個元素上從右滑動超過 30px 時被觸發

3、滾動事件

scrollstart 事件在用戶開始滾動頁面時被觸發
     （iOS 設備會在滾動事件發生時凍結 DOM 操做）
scrollstop 事件在用戶中止滾動頁面時被觸發

4、方向（橫豎屏轉動）

orientationchange 事件在用戶垂直或水平旋轉移動設備時被觸發
可以經過window.orientation 來檢測橫屏豎屏

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});

5、頁面事件

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

【初始化事件】

pagebeforecreate 當頁面即將初始化。並且在 jQuery Mobile 已開始加強頁面以前，觸發該事件。

pagecreate 當頁面已建立，但加強完畢以前，觸發該事件。
pageinit 當頁面已初始化。並且在 jQuery Mobile 已完畢頁面加強以後，觸發該事件。

$(document).on("pagebeforecreate",function(event){})

【載入事件】

pagebeforeload 在不論什麼頁面載入請求做出以前觸發。

pageload 在頁面已成功載入並插入 DOM 後觸發。
pageloadfailed 假設頁面載入請求失敗，則觸發該事件。默認地，將顯示 "Error Loading Page" 消息。

$(document).on("pageload",function(event,data){})

【過渡事件】

pagebeforeshow 在「去的」頁面觸發，在過渡動畫開始前。
pageshow 在「去的」頁面觸發，在過渡動畫完畢後。
pagebeforehide 在「來的」頁面觸發，在過渡動畫開始前。

pagehide 在「來的」頁面觸發。在過渡動畫完畢後。

$(document).on("pagebeforeshow","#pagetwo",function(){ })