jQuery Mobile 事件

当前位置：jquerymobile ->jquery mobile 1.3 中文手册API ->jQuery Mobile 事件

jQuery Mobile 事件

JQM开创性的提供了丰富的事件处理机制，并且耗费了很大的精力将不同设备的事件进行了整合，使开发者不必再为了解决不同设备之间的事件处理差异而耗费时间和精力。

Jquery Mobile 事件包括：触摸事件、虚拟鼠标事件、设备方向事件、滚屏事件、页面加载事件、页面显示/隐藏事件、页面初始化事件、动画事件等。这些事件会根据当前设备的特性来分别使用Touch、mouse或者window事件来匹配当前的设备可用的事件，所有不管是移动设备还是桌面设备的操作都将是可靠的。并且这些事件同样可以使用jQuery中的live()和bind()方法。

注意：使用pageCreate()代替$(document).ready()

在学习jQuery时我们学到了用$(document).ready()来使你的脚本在DOM元素加载完成后才开始执行，但是在JQM中每一页的内容都是通过Ajax来加载的，这样在进行页面转换的时候是无法再次触发$(document).ready()方法的，因此我们需要绑定pageCreate事件来处理页面转换时需要执行的脚本。

动画事件(animationComplete) JqueryMobile提供了animationComplete插件，你可以用来添加或删除一个class来应用CSS转场效果。

页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide) 在jQueryMobile里，无论一个page在什么时候处于显示或者隐藏状态，这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏，所以，当一个page过渡发生，会有4个事件被触发:每个page触发2个：pagebeforeshow：转场之前，页面被显示时触发。pagebeforehide：转场之前，页面被隐藏时触发。pageshow：转场之后，页面被显示时触发。pagehide：转场之后，页面被隐藏时触发。请注意这4个事件都引用了“上一页”，或“下一页”，这取决于哪一页被显示或者隐藏，以及“上一页”或者“下一页”是否存在。（第一个page显示时并没有"上一页"，但是同样会引用一个空的jQuery对象），你可以通过将第二个参数作为一个绑定的回调函数访问这一引用$('div').live('pageshow',function(event,ui){alert('Thispagewasjusthidden:'+ui.prevPage);});$('div').live('pagehide',function(event,ui){alert('Thispagewasjustshown:'+ui.nextPage);});而且，务必在Jquer

页面初始化事件(pagebeforecreate、pagecreate) JqueryMobile会自动基于page"内的增强的约定自动初始化一些插件。例如：给一个input输入框约定了type=range属性会自动生成一个自定义滑动条。这些自动初始化的行为是受"page"插件控制的，它在执行前后部署部署事件，允许你在初始化前后操作页面，或者甚至自己提供初始化行为，禁止自动初始化。注以下的页面初始化事件在每个“page”只被触发一次，与每次页面在显示或者隐藏的show/hide事件刚刚相反。pagebeforecreate：页面初始化时，初始化之前触。pagecreate：页面初始化时，初始化之后触。$('#aboutPage').live('pagebeforecreate',function(event){alert('Thispagewasjustinsertedintothedom!');});$('#aboutPage').live('pagecreate',function(event){alert('ThispagewasjustenhancedbyJqueryMobile!');});注意：通过绑定pagebeforecreate然后returnfalse，你禁止页面插件自己的操作。而且，务必在JqueryMobile执

页面加载事件(pagebeforeload、pageload) 当外部的页面加载到dom中时，有两个事件被触发。第一个是pagebeforeload，第二个是pageload，或者pageloadfailed。pagebeforeload在加载请求发出之前触发，绑定到这个事件的回调函数可以可以对该事件调用preventDefault()，来表明由他们来处理加载的请求。这样的做的话回调函数必须对通过数据对象传到回调函数的对象调用resolve()或者reject()。通过第二个参数传到回调函数的对象包含如下的属性：url(字符串)：通过回调传到$.mobile.loadPage()的绝对或者相对地址absUrl(字符串)：url的绝对地址版本。dataUrl(字符串)：绝对地址的当识别页面或者更新浏览器地址的时候使用的绝对地址经过过滤的版本deferred(对象)：针对此事件调用preventDefault()的回调函数必须针对此事件调用resolve()或者reject()方法，使得changePage()的请求恢复。例如:$(document).bind("pagebeforeload",function(event,data){//让jqm框架知道由我们来处理load事件.event.preventDefault();//

滚屏事件(scrollstart、scrollstop) scrollstart：当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。$(document).ready(function(){$('body').bind('scrollstart',function(event){//Addscrollstartcodehere});});scrollstop：滚屏结束时触发。$(document).ready(function(){$('body').bind('scrollstop',function(event){//Addscrollstopcodehere});});<!DOCTYPE html><html> <head> <title>Ajax测试</title> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

方向改变事件(orientationchange) 当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，你的回调函数可以加入第二个参数，作用为描述设备横或纵向的属性，"portrait"或;landscape"。这些值也会作为class值加入到html的元素中，使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize事件。手持设备方向改变时执行$(window).bind('orientationchange',function(e){varheight=document.body.clientHeight-195;$("#content").css("min-height",height);$("#thumb").css("margin",height/4.2+"pxauto");});以上示例是本人用于在手持设备改变方向时填充整个页面，避免出现空白，可以根据自己的需求扩展。$(function(){$('a').click(function(){$(window).trigger('orientationchange');});});在智能手机和平板设备上，只有一个名称为orientationchange的方向事件。该事件

虚拟鼠标事件 我们提供了一系列"虚拟的"鼠标事件试图把鼠标和触摸事件抽象出来。这使得开发者能够给一些基础的鼠标事件，例如mousedown,mousemove,mouseup,和click来注册监听。插件会在触摸环境中，插件会保持在传统鼠标环境下触发的顺序，例如：vmouseup总是在vmousedown之前被触发，vmousedown总是在vmouseup之前，等等。虚拟鼠标事件也会把书剑中放出的坐标信息标准化。所以在基于触摸的设备中事件对象的pageX,pageY,screenX,screenY,clientX,andclientY这些属性的坐标都可以用。vmouseover：处理touch或者mouseover的正规化的事件vmousedown：处理touchstart或者mousedown的正规化的事件vmousemove：处理touchmove或者mousemove的正规化的事件vmouseup：处理touchend或者mouseup的正规化的事件vclick：处理touchend或者鼠标点击的正规化的事件。在基于触摸的设备上，这个事件是在vmouseup事件之后触发的。vmousecancel：处理touch或者mouse的mousecancel的正规化的事件警告：

触摸事件(touch) 在jQueryMobile中有一些触摸事件是可定制的。然而，这些事件仅当与支持触摸功能的设备进行交互的用户访问您的jQueryMobile网站时才可用。当这些事件可用时，您可以触发任何自定义javascript作为对五种不同的事件的响应tap、taphold、swipe、swipeleft和swiperight。tap(轻击)：一次快速完整的轻击后触发taphold（轻击不放）：轻击并不放（大约一秒）后触发swipe(滑动)：一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件。多长时间拖拽多少px可以设置的。这个事件有其相关联的属性，分别为scrollSupressionThreshold(默认:10px)–水平方向拖拽大于这个值，将不触发。durationThreshold(默认:1000ms)–滑动时间超过这个数值就不会产生滑动事件。horizontalDistanceThreshold(默认:30px)–水平划动距离超过这个数值才会产生滑动事件。verticalDistanceThreshold(默认:75px)–竖直划动距离小于这个数值才会产生滑动事件。swipeleft（左划）：划动事件为向左的方向时触发swiperight（右划