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

觸摸事件 - 當(dāng)用戶觸摸屏幕時(shí)觸發(fā)（敲擊和滑動(dòng)）
滾動(dòng)事件 - 當(dāng)上下滾動(dòng)時(shí)觸發(fā)
方向事件 - 當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時(shí)觸發(fā)
頁面事件 - 當(dāng)頁面被顯示、隱藏、創(chuàng)建、加載以及/或卸載時(shí)觸發(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          事件在用戶敲擊某個(gè)元素時(shí)觸發(fā)
taphold      事件在用戶敲擊某個(gè)元素并保持一秒時(shí)被觸發(fā)
swipe        事件在用戶在某個(gè)元素上水平滑動(dòng)超過 30px 時(shí)被觸發(fā)
swipeleft    事件在用戶在某個(gè)元素上從左滑動(dòng)超過 30px 時(shí)被觸發(fā)
swiperight   事件在用戶在某個(gè)元素上從右滑動(dòng)超過 30px 時(shí)被觸發(fā)

三、滾動(dòng)事件

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

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

orientationchange 事件在用戶垂直或水平旋轉(zhuǎn)移動(dòng)設(shè)備時(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)建時(shí)，以及在頁面初始化之后
Page Load/Unload - 當(dāng)外部頁面加載時(shí)、卸載時(shí)或遭遇失敗時(shí)
Page Transition - 在頁面過渡之前和之后
Page Change - 當(dāng)頁面被更改，或遭遇失敗時(shí)

【初始化事件】

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

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

【過渡事件】

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

$(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動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

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