jQuery Mobile 除了支持所有标准的jQuery 时间外，还支持触摸、滚动、方向和页面（显示、隐藏、加载等）事件。
1 初始化事件：jQuery 中我们一般使用$(document).ready(function(){}); 在jQuery中一般使用‘pageinit’事件。它在页面初始化并完善样式之后触发。
<script>
$(document).on("pageinit","#pageone",function(){
// 此处是 jQuery 事件...
});
</script>
2 触摸事件
tag：当敲击到某个元素上触发。
<script>
$(document).on("pageinit","#pageone",function(){
$("p").on("tap",function(){
$(this).hide();
});
});
</script>
taphold：当敲击到某个元素上并保持一秒触发。
$(document).on("pageinit","#pageone",function(){
$("p").on("taphold",function(){
$(this).hide();
});
});
</script>
swipeleft : 某个元素上从左滑动超过30px时触发。
swiperight: 某个元素上从右滑动超过30px时触发。
<script>
$(document).on("pageinit","#pageone",function(){
$("p").on("swiperight",function(){
alert("您向右滑动！");
});
});
</script>
3 滚动事件
scrollstart 和 scrollend 滚动开始和结束时触发。
<script>
$(document).on("pageinit","#pageone",function(){
$(document).on("scrollstop",function(){
alert("停止滚动！");
});
});
</script>
4 方向事件
orientationchange 事件在设备的水平或者垂直方向发生改变时触发。添加在window对象上。
$(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%"});
}
});
5 页面事件
Initialization ： pagebeforecreate、pagecreate、pageinit：可以简单理解为：页面创建前、创建中、创建后触发。
$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件！")
});
load：页面加载属于外部事件。pagebeforeload、pagelode、pagelodefailed：加载请求发出之后、成功、失败触发。
$(document).on("pageload",function(event,data){
alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
过渡：pagebeforeshow、pageshow、pagebeforehide、pagehide: 新页面过渡动画开始前、新页面过渡动画完成后、当前页面过渡动画开始前、当前也买年过渡动画完成后触发。
$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
alert("现在隐藏页面二");
});