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

觸摸事件 - 當(dāng)用戶觸摸屏幕時觸發(fā)（敲擊和滑動）
滾動事件 - 當(dāng)上下滾動時觸發(fā)
方向事件 - 當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時觸發(fā)
頁面事件 - 當(dāng)頁面被顯示、隱藏、創(chuàng)建、加載以及/或卸載時觸發(fā)

一、初始化事件

1. ready 事件 頁面加載完成

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

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

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

3.事件格式

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

二、觸摸事件

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

三、滾動事件

scrollstart 事件在用戶開始滾動頁面時被觸發(fā)
（iOS 設(shè)備會在滾動事件發(fā)生時凍結(jié) DOM 操作）
scrollstop 事件在用戶停止?jié)L動頁面時被觸發(fā)

四、方向（橫豎屏轉(zhuǎn)動）

orientationchange 事件在用戶垂直或水平旋轉(zhuǎn)移動設(shè)備時被觸發(fā)

可以通過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 - 在頁面創(chuàng)建前，當(dāng)頁面創(chuàng)建時，以及在頁面初始化之后
Page Load/Unload - 當(dāng)外部頁面加載時、卸載時或遭遇失敗時
Page Transition - 在頁面過渡之前和之后
Page Change - 當(dāng)頁面被更改，或遭遇失敗時

【初始化事件】

pagebeforecreate 當(dāng)頁面即將初始化，并且在 jQuery Mobile 已開始增強(qiáng)頁面之前，觸發(fā)該事件。
pagecreate 當(dāng)頁面已創(chuàng)建，但增強(qiáng)完成之前，觸發(fā)該事件。
pageinit 當(dāng)頁面已初始化，并且在 jQuery Mobile 已完成頁面增強(qiáng)之后，觸發(fā)該事件。

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

【加載事件】

pagebeforeload 在任何頁面加載請求作出之前觸發(fā)。
pageload 在頁面已成功加載并插入 DOM 后觸發(fā)。
pageloadfailed 如果頁面加載請求失敗，則觸發(fā)該事件。默認(rèn)地，將顯示 "Error Loading Page" 消息。

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

【過渡事件】

pagebeforeshow 在“去的”頁面觸發(fā)，在過渡動畫開始前。
pageshow 在“去的”頁面觸發(fā)，在過渡動畫完成后。
pagebeforehide 在“來的”頁面觸發(fā)，在過渡動畫開始前。
pagehide 在“來的”頁面觸發(fā)，在過渡動畫完成后。

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

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

最新評論