【Jquery mobile】事件
jQuery Mobile提供了一些依赖于本地事件的自定义事件以用来创建一些有用的hooks方便开发. 要注意这些事件使用了各种已存在的触摸， 鼠标和窗口事件，你可以通过使用live() 或者 bind()将他们绑定到其他的jQuery事件上.
触摸事件
-
tap - 在快速完整的一次触摸后触发该事件.
-
taphold - 在按住不放后触发该事件(接近一秒钟的时间).Triggers after a held complete touch event (close to one second).
-
swipe - 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).
-
swipeleft - 在左边方向移动时触发该事件.
-
swiperight - 在右边方向移动时触发该事件..
方向改变事件
-
orientationchange -
当设备的方向改变时触发 (把设备转到垂直或者水平方向). 你绑定到此事件的回调函数可以有一个第二参数， 该参数包含一个
orientation属性，该属性可以设置为"portrait" 或 "landscape".这些值也被添加为HTML元素的classes，你也可以在你的css选择器里指定它们. 要注意，当orientationChange不被支持时我们现目前将绑定resize事件作为替代.
滚动事件
-
scrollstart - 当滚动开始时触发.要注意的是，IOS设备在滚动时会禁止DOM操作，并将DOM操作排队，当滚动结束时才执行这些操作.我们现在正在研究是否能够让DOM操作在滚动之前执行
-
scrollstop - 滚动结束时触发.
页面 显示/隐藏 事件
在jQuery Mobile里，无论一个page在什么时候处于显示或者隐藏状态，这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏，所以，当一个page过渡发生，会有4个事件被触发:每个page触发两个.
-
pagebeforeshow - 当page正在被显示但在它的过渡效果开始前触发.
-
pagebeforehide - 当page正在被隐藏但在它的过渡效果开始前触发.
-
pageshow - 当page正在被显示但在它的过渡效果结束后触发.
-
pagehide - 当page正在被隐藏但在它的过渡效果结束后触发.
要注意这四个事件都引用了"下一页" (nextPage) 或者"上一页" (prevPage)， 依赖于page是否正在显示或者隐藏且"下一页"或"上一页"存在(第一个page显示时并没有"上一页"，但是同样会引用一个空的jQuery对象). 你可以通过在第二个参数绑定一个回调函数来访问这个引用.比如:
$('div').live('pageshow'，function(event， ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide'，function(event， ui){
alert('This page was just shown: '+ ui.nextPage);
});
当然，这些处理程序会在初始化page加载时被调用(invoked)，你必须在jquery 执行之前就bind它们. 这些事情可以在mobileinit处理程序中完成，详情参见global config
页面初始化事件
在jQuery Mobile内部，自动初始化插件基于被设置有"page"标签的标记.例如:一个type为 range 的input元素 会自动的生成一个slider控件.
这种自动初始化是被"page"插件所控制，它会在它执行前后调度事件，并允许你在初始化前后操作页面， 或者甚至允许你提供你自己的初始化行为来阻止自动初始化. 要注意，这些事件每个"page"只会被触发一次，与每次页面在显示或者隐藏的show/hide事件刚刚相反.
-
pagebeforecreate - 在页面正在初始化的时候触发(在初始化完成之前).
-
pagecreate - 在页面正在初始化的时候触发(在初始化完成之后).
要注意，通过绑定 pagebeforecreate事件并且返回false， 你可以阻止页面插件它们自己的操作.
注意:"Page ID": jQuery Mobile中的page元素使用 ID 属性来存储他们的来源位置.当你在page上设置一个ID属性时将会通过ajax把该page加载到jQuery Mobile的"单一页面"环境. jQuery Mobile会用一个新的div("page")元素来包裹住该，并为你的ID页面保存所有css设置. 然而，这意味着你的ID属性将不会出现在这个"page"元素上，所以你在绑定page事件的时候考虑到这一点. (比如:pagebeforecreate， pagecreate ，等). 为了避免这个问题，你可以尝试使用class.
ex:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale = 1.0 ,user-scalable=no , maximum-scale = 1.0 ">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<script type="text/javascript">
$("#home").bind('pageinit', function() {
// do something here...
$('body').bind('tap', function(e) { alert('You tap and held!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('taphold', function(e) { alert('You taphold and held!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipe', function(e) { alert('You swiped!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) { alert('You swipeleft!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('swiperight', function(e) { alert('You swiperight!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('orientationchange', function(e) { alert('You orientationchange!');
e.stopImmediatePropagation();
return false;
});
});
</script>
<div data-role="header">
<h1>jQuery Mobile Events</h1>
</div>
<div data-role="content">
<p>
Try:
</p>
<ul>
<li>
Tapping and holding
</li>
<li>
Swiping
</li>
</ul>
</div>
</div>
</body>
</html>