初始化事件/Initial
$(document).on("pageinit","#pageID",function(){
//code
});
触控事件/Touch
tap 敲击元素时触发
$("div.test").on("tap",function(){
//code
});
taphold 敲击元素并保持一秒时触发
$("div.test").on("taphold",function(){
//code
});
swipe 在元素上水平滑动超过30px时触发
$("div.test").on("swipe",function(){
//code
});
swipeleft 在元素上从左滑动超过30px时触发
$("div.test").on("swipeleft",function(){
//code
});
swipeleft 在元素上从右滑动超过30px时触发
$("div.test").on("swiperight",function(){
//code
});
滚动事件/Scroll
滚动事件要绑定在document对象上。iOS设备会在滚动事件发生时冻结DOM操作。
scrollstart 开始滚动页面时触发
$(document).on("scrollstart",function(){
//code
});
scrollstop 停止滚动页面时触发
$(document).on("scrollstop",function(){
//code
});
方向事件/orientationchange
方向事件要绑定到window对象上
$(window).on("orientationchange",function(){
//code
});
event对象里存有设备的方向属性orientation
$(window).on("orientationchange",function(event){
if(event.orientation == portrait){
//code
}
if(event.orientation == landscape){
//code
}
});
也可以用window.orientation来判断设备方向
$(window).on("orientationchange",function(event){
if(window.orientation == 0){
//portrait
}
if(window.orientation == 90 || window.orientation == -90){
//landscape
}
});
页面事件/Page
Page Initialization 页面初始化事件
$(document).on("pageinit",function(){
alert("触发 pageinit 事件 - 页面已初始化，DOM 已加载，jQuery Mobile 已完成页面增强。")
});
$(document).on("pagebeforecreate",function(){
alert("触发 pagebeforecreate 事件 - 页面即将初始化。jQuery Mobile 仍未开始增强页面。");
});
$(document).on("pagecreate",function(){
alert("触发 pagecreate 事件 - 已创建页面，但增强未完成。");
});
Page Load/Unload 载入DOM事件
$(document).on("pagebeforeload",function(event,data){
//pagebeforeload 页面加载请求发出之前触发
alert("即将触发 pageload 事件！
URL: " + data.url);
});
$(document).on("pageload",function(event,data){
//pageload 页面已成功加载并插入DOM之后触发
alert("触发 pageload 事件！
URL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
//pageloadfailed 页面加载请求失败时触发
alert("抱歉，被请求页面不存在。");
});
Page Transition 页面过渡事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 5 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 6 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 7 <script> 8 9 10 11 12 $(document).on("pagebeforeshow","#page2",function(){ 13 //pagebeforeshow 离开旧页面时触发，在过渡动画开始前 14 alert("触发 pagebeforeshow 事件 - 页面二即将显示"); 15 }); 16 $(document).on("pageshow","#page2",function(){ 17 //pageshow 离开旧页面时触发，在过渡动画完成后 18 alert("触发 pageshow 事件 - 现在显示页面二"); 19 }); 20 $(document).on("pagebeforehide","#page2",function(){ 21 //pagebeforehide 转到新页面时触发，在过渡动画开始前 22 alert("触发 pagebeforehide 事件 - 页面二即将隐藏"); 23 }); 24 $(document).on("pagehide","#page2",function(){ 25 //pagehide 转到新页面时触发，在过渡动画完成后 26 alert("触发 pagehide 事件 - 现在隐藏页面二"); 27 }); 28 </script> 29 </head> 30 <body> 31 32 <div data-role="page" id="page1"> 33 <div data-role="header"> 34 <h1>Header</h1> 35 36 </div> 37 38 <div data-role="content"> 39 <a href="#page2">转到页面二</a> 40 </div> 41 42 <div data-role="footer"> 43 <h1>Footer</h1> 44 </div> 45 </div> 46 47 <div data-role="page" id="page2"> 48 <div data-role="header"> 49 <h1>Header</h1> 50 51 </div> 52 53 <div data-role="content"> 54 <a href="#page1">转到页面一</a> 55 </div> 56 57 <div data-role="footer"> 58 <h1>Footer</h1> 59 </div> 60 </div> 61 62 </body> 63 </html>