Jquery Mobile事件

Jquery Mobile事件參考手冊

on()方法用於添加事件處理程序

1.Touch類事件

在用戶觸摸屏幕時觸發

　　1.1 tap事件 用戶敲擊某個元素時發生

$("p").on("tap",function(){
    $(this).hide();
})

 

　　1.2 taphold事件 用戶敲擊某個元素並保持一秒被觸發

$("p").on("taphold",function(){
    $(this).hide();
})

　　1.3 swipeleft 用戶在某個元素上左滑動超過30px時觸發

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

2.滾動事件

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

$(document).on("scrollstart",function(){
  alert("開始滾動！");
});

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

$(document).on("scrollstop",function(){
  alert("中止滾動！");
});

3.方向事件

orientationchange 事件 用戶水平或垂直旋轉屏幕時觸發

使用orientationchange 事件，須要把它添加到window對象

 

$(window).on("orientationchange",function(){
  alert("方向已改變！");
});

 

因爲該事件與window對象綁定，就有window.orientation屬性

if(window.orientation==0){
說明屏幕是portrait的
}

提示：window.orientation 屬性對 portrait 視圖返回 0，對 landscape 視圖返回 90 或 -90

4.頁面事件

在 jQuery Mobile 中與頁面打交道的事件被分爲四類：

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

　　4.1 Initialization事件

事件	描述
pagebeforecreate	當頁面即將初始化，而且在 jQuery Mobile 已開始加強頁面以前，觸發該事件。
pagecreate	當頁面已建立，但加強完成以前，觸發該事件。
pageinit	當頁面已初始化，而且在 jQuery Mobile 已完成頁面加強以後，觸發該事件。

$(document).on("pagebeforecreate",function(event){
  alert("觸發 pagebeforecreate 事件！");
}); 
$(document).on("pagecreate",function(event){
  alert("觸發 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
  alert("觸發 pageinit 事件！")
});

　　4.2 Load事件 外部頁面加載

事件	描述
pagebeforeload	在任何頁面加載請求做出以前觸發。
pageload	在頁面已成功加載並插入 DOM 後觸發。
pageloadfailed	若是頁面加載請求失敗，則觸發該事件。默認地，將顯示 "Error Loading Page" 消息。

 

$(document).on("pageload",function(event,data){
  alert("觸發 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被請求頁面不存在。");
});

　　4.3 過渡事件 從一頁過渡到下一頁時觸發

 

事件	描述
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("如今隱藏頁面二");
});