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

觸摸事件 - 當(dāng)用戶(hù)觸摸屏幕時(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          事件在用戶(hù)敲擊某個(gè)元素時(shí)觸發(fā)
taphold      事件在用戶(hù)敲擊某個(gè)元素并保持一秒時(shí)被觸發(fā)
swipe        事件在用戶(hù)在某個(gè)元素上水平滑動(dòng)超過(guò) 30px 時(shí)被觸發(fā)
swipeleft    事件在用戶(hù)在某個(gè)元素上從左滑動(dòng)超過(guò) 30px 時(shí)被觸發(fā)
swiperight   事件在用戶(hù)在某個(gè)元素上從右滑動(dòng)超過(guò) 30px 時(shí)被觸發(fā)

三、滾動(dòng)事件

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

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

orientationchange 事件在用戶(hù)垂直或水平旋轉(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)容感興趣的讀者可查看本站專(zhuān)題：《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)論