jQuery-mobile事件監聽與用法詳解

NO IMAGE

本文例項講述了jQuery-mobile事件監聽與用法。分享給大家供大家參考,具體如下:

觸控事件 – 當使用者觸控式螢幕幕時觸發(敲擊和滑動)
滾動事件 – 當上下滾動時觸發
方向事件 – 當裝置垂直或水平旋轉時觸發
頁面事件 – 當頁面被顯示、隱藏、建立、載入以及/或解除安裝時觸發

一、初始化事件

1. ready 事件 頁面載入完成


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

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


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

3.事件格式


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

二、觸控事件

tap          事件在使用者敲擊某個元素時觸發
taphold      事件在使用者敲擊某個元素並保持一秒時被觸發
swipe        事件在使用者在某個元素上水平滑動超過 30px 時被觸發
swipeleft    事件在使用者在某個元素上從左滑動超過 30px 時被觸發
swiperight   事件在使用者在某個元素上從右滑動超過 30px 時被觸發

三、滾動事件

scrollstart 事件在使用者開始滾動頁面時被觸發
(iOS 裝置會在滾動事件發生時凍結 DOM 操作)
scrollstop 事件在使用者停止滾動頁面時被觸發

四、方向(橫豎屏轉動)

orientationchange 事件在使用者垂直或水平旋轉移動裝置時被觸發

可以通過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 – 在頁面建立前,當頁面建立時,以及在頁面初始化之後
Page Load/Unload – 當外部頁面載入時、解除安裝時或遭遇失敗時
Page Transition – 在頁面過渡之前和之後
Page Change – 當頁面被更改,或遭遇失敗時

【初始化事件】

pagebeforecreate 當頁面即將初始化,並且在 jQuery Mobile 已開始增強頁面之前,觸發該事件。
pagecreate 當頁面已建立,但增強完成之前,觸發該事件。
pageinit 當頁面已初始化,並且在 jQuery Mobile 已完成頁面增強之後,觸發該事件。


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

【載入事件】

pagebeforeload 在任何頁面載入請求作出之前觸發。
pageload 在頁面已成功載入並插入 DOM 後觸發。
pageloadfailed 如果頁面載入請求失敗,則觸發該事件。預設地,將顯示 “Error Loading Page” 訊息。


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

【過渡事件】

pagebeforeshow 在“去的”頁面觸發,在過渡動畫開始前。
pageshow 在“去的”頁面觸發,在過渡動畫完成後。
pagebeforehide 在“來的”頁面觸發,在過渡動畫開始前。
pagehide 在“來的”頁面觸發,在過渡動畫完成後。


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

更多關於jQuery相關內容感興趣的讀者可檢視本站專題:《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷演算法與技巧總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結

希望本文所述對大家jQuery程式設計有所幫助。

您可能感興趣的文章:

Jquery on繫結的事件 觸發多次例項程式碼jQuery的事件預繫結淺談jQuery中Ajax事件beforesend及各引數含義淺談jQuery hover(over, out)事件函式利用JQuery阻止事件冒泡基於jQuery的select下拉框選擇觸發事件例項分析jQuery實現自動呼叫和觸發某個事件的方法jQuery 移動端拖拽(模組化開發,觸控事件,webpack)淺談jquery之on()繫結事件和off()解除繫結事件淺談jQuery繫結事件會疊加的解決方法和心得總結詳解jQuery中的事件