jQuery-mobile事件監(jiān)聽與用法詳解
本文實(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ì)有所幫助。
相關(guān)文章
如何將 jQuery 從你的 Bootstrap 項(xiàng)目中移除(取而代之使用Vue.js)
Bootstrap是網(wǎng)上最流行的前端開發(fā)框架。下面通過本文給大家分享將 jQuery 從你的 Bootstrap 項(xiàng)目中移除的方法,需要的的朋友參考下吧2017-07-07
jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
顯示隱藏效果的實(shí)現(xiàn)主要是jquery層選擇器的應(yīng)用:當(dāng)鼠標(biāo)移動(dòng)經(jīng)過照片就顯示設(shè)為封面刪除,移開后就隱藏,此效果在web開發(fā)中經(jīng)常會(huì)用到,感興趣的朋友可以參考下哈2013-03-03
jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)
其實(shí)樓主的F和jQuery.fn.init是相等的; 實(shí)現(xiàn)功能是和jq一樣的, 只是jq的把構(gòu)造函數(shù)放進(jìn)原型;如果非要說原因,個(gè)人理解jq這樣寫整體結(jié)構(gòu)清晰,先是入口構(gòu)造函數(shù),緊跟著是原型部分(原型里面init是初始化),但是不好理解;乍一看確實(shí)挺繞, 我也是看了好久才明白怎么回事2015-05-05
jquery ajax實(shí)現(xiàn)下拉框三級(jí)無刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
jquery ajax實(shí)現(xiàn)下拉框三級(jí)無刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-10-10
js調(diào)用iframe實(shí)現(xiàn)打印頁面內(nèi)容的方法
這篇文章主要介紹了js調(diào)用iframe實(shí)現(xiàn)打印頁面內(nèi)容的方法,需要的朋友可以參考下2014-03-03
jquery獲取url參數(shù)及url加參數(shù)的方法
本文給大家介紹jquery獲取url參數(shù)及url參數(shù)的方法,在url中加參數(shù)的方法本文通過多種方式給大家介紹jquery獲取url參數(shù),感興趣的朋友一起學(xué)習(xí)學(xué)習(xí)吧2015-10-10

