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

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

一、初始化事件

1. ready 事件 頁(yè)面加載完成

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

2. 頁(yè)面加載完成事件二 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)超過(guò) 30px 時(shí)被觸發(fā)
swipeleft    事件在用戶在某個(gè)元素上從左滑動(dòng)超過(guò) 30px 時(shí)被觸發(fā)
swiperight   事件在用戶在某個(gè)元素上從右滑動(dòng)超過(guò) 30px 時(shí)被觸發(fā)

三、滾動(dòng)事件

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

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

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

可以通過(guò)window.orientation 來(lái)檢測(cè)橫屏豎屏

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

五、頁(yè)面事件

Page Initialization - 在頁(yè)面創(chuàng)建前，當(dāng)頁(yè)面創(chuàng)建時(shí)，以及在頁(yè)面初始化之后
Page Load/Unload - 當(dāng)外部頁(yè)面加載時(shí)、卸載時(shí)或遭遇失敗時(shí)
Page Transition - 在頁(yè)面過(guò)渡之前和之后
Page Change - 當(dāng)頁(yè)面被更改，或遭遇失敗時(shí)

【初始化事件】

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

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

【加載事件】

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

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

【過(guò)渡事件】

pagebeforeshow 在“去的”頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)開(kāi)始前。
pageshow 在“去的”頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)完成后。
pagebeforehide 在“來(lái)的”頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)開(kāi)始前。
pagehide 在“來(lái)的”頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)完成后。

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

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

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

最新評(píng)論