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

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

續上

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

一、初始化事件1. ready 事件 頁面載入完成

 

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

 

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

 

 

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

 

3.事件格式

 

 

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

 

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


三、滾動事件

scrollstart 事件在使用者開始滾動頁面時被觸發
（iOS 裝置會在滾動事件發生時凍結 DOM 操作）
scrollstop 事件在使用者停止滾動頁面時被觸發


四、方向（橫豎屏轉動）

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

 

五、頁面事件

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(){ })