jQuery-mobile事件監聽與用法詳解

本文實例講述了jQuery-mobile事件監聽與用法。分享給大家供大家參考，具體如下：

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

一、初始化事件

1. ready 事件頁面載入完成

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

  

2. 頁面載入完成事件二pagein

  

2. 頁面載入完成事件二pagein

3.事件格式

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

   

二、觸控事件

tap          事件在使用者敲擊    事件在使用者在某個元素上水平滑動超過30px 時被觸發
swipeleft    事件在用戶在某個元素上從左滑動超過30px 時被觸發
swiperight   事件在用戶在某個元素上從右滑動超過30px 時被觸發

三、滾動事件

scrollstart 事件在用戶開始滾動頁面時被觸發

（iOS 設備會在滾動事件發生時凍結DOM 操作）

scrollstop 事件在用戶停止滾動頁面時被觸發

四、方向（橫豎屏轉動）

orientationchange 事件在使用者垂直或水平旋轉行動裝置時觸發

可以透過window.orientation 來偵測橫屏垂直螢幕

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

   

ation，頁面在建立頁面當頁面建立時，以及在頁面初始化之後

Page Load/Unload - 當外部頁面加載時、卸載時或遭遇失敗時
Page Transition - 在頁面過渡之前和之後

Page Change - 當頁面被更改，或遭遇失敗時

【初始化事件】

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

$(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%"});
 }
});

   

【載入事件】

pagebeforeload 在任何頁面載入請求作出之前觸發。

pageload 在頁面已成功載入並插入 DOM 後觸發。

pageloadfailed 如果頁面載入要求失敗，則觸發該事件。預設地，將顯示 "Error Loading Page" 訊息。

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

   

【過渡事件】

pagebeforeshow 在「去的」頁面觸發，在過渡動畫開始前。

pageshow 在「去的」頁面觸發，在過渡動畫完成後。

pagebeforehide 在「來的」頁面觸發，在過渡動畫開始前。

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

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

更多jQuery-mobile事件監聽與用法詳解相關文章請關注PHP中文網！