跟我学jQuery Mobile框架事件编程技术及应用实例(第1部分)
目录
1.1跟我学jQuery Mobile框架事件编程技术及应用实例（第1部分） (2)
1.1.1jQuery Mobile 中标准的jQuery 事件 (2)
1.1.2jQuery Mobile 还提供若干种为移动浏览定制的事件 (2)
1.2jQuery Mobile 页面事件 (5)
1.2.1jQuery Mobile 页面初始化事件 (5)
1.2.2jQuery Mobile Initialization 事件 (7)
1.2.3jQuery Mobile Load 事件 (8)
1.2.4jQuery Mobile 过渡事件 (9)
1.1跟我学jQuery Mobile框架事件编程技术及应用实例（第1部分）1.1.1jQuery Mobile 中标准的 jQuery 事件
可以在JQM中使用jQuery 事件和JS中的标准的事件。
1.1.2jQuery Mobile 还提供若干种为移动浏览定制的事件
1、主要的事件分类
（1）触摸事件- 当用户触摸屏幕时触发（敲击和滑动）
（2）滚动事件- 当上下滚动时触发
（3）方向事件- 当设备垂直或水平旋转时触发
（4）页面事件- 当页面被显示、隐藏、创建、加载以及/或卸载时触发
2、jQuery Mobile中的所有的事件
（1）绑定事件的方法
请通过使用on() 方法来绑定事件，因为jQuery on() 方法用于添加事件处理程序。（2）
（3）JQM页面事件的执行流程
1.2jQuery Mobile 页面事件
1.2.1jQuery Mobile 页面初始化事件
1、jQuery 中的document ready 事件
在jQuery 中，您已经学到使用文档ready 事件来阻止jQuery 代码在文档结束加载（is
ready）前运行jQuery document ready 事件。
2、在jQuery Mobile 中则使用pageinit 事件
然而，在jQuery Mobile 中，我们使用pageinit 事件（因为在JQM中每一页的内容都是通过Ajax来加载的，这样在进行页面转换的时候是无法再次触发$(document).ready()方法的），该事件在页面已初始化并完善样式设置后发生。在下面的jQuery Mobile pageinit 事件代码示例中的第二个参数("#pageone") 指向页面的id。
如果需要对某一个页面（page）编写其独享的Javascript脚本时，选择器应该选择的是该页面层而不是document。
3、事件绑定的脚本写在哪里
由于每个页面第一次加载的时候都会调用pagebeforecreate、pagecreate和pageinit方法对其完成创建和初始化，但三个方法只会调用一次，下次跳转显示的时候因为页面已经创建了不会再对它们进行调用，而只会调用pagebeforeshow和pageshow完成显示。
因此事件绑定的脚本应该要写在“pagebeforecreate、pagecreate和pageinit”的事件响应中，而不应该写在“pagebeforeshow、pageshow”的事件响应中。
4、动态加载数据的脚本写在哪里
加载数据的脚本必须写在“pagebeforeshow”或“pageshow”事件的响应中，因为此两个事件每次页面显示的时候都会触发JQM ajax方式打开过的页面，没有刷新页面的时候是不会销毁，而只是隐藏掉，下次再请求同一个页面就会将DOM中的该页面再显示出来。
比如某个系统中的“详细内容”页，同一个页面可能每次打开都会是不同的数据。所
以每次都要重新获取数据，所以获取数据并渲染的方法代码要写在“pagebeforeshow”或“pageshow”这两个事件中。
5、mobileinit事件
jQuery Mobile 包括一个初始化事件，该事件甚至会先于jQuery 的document.ready 事件进行加载。jQuery Mobile 实际上在文档对象本身上触发其初始化事件，第一个触发的事件是mobileinit。当Jquery Mobile开始执行时，他就会在document对象上触发mobileinit 事件，因为mobileinit事件是在加载后马上触发，所以你需要在Jquery Mobile加载之前绑定你的事件处理函数，所以需要如下安排你的js引用顺序：
要扩展mobileinit 事件，您首先需要将它与一个自定义函数进行绑定。可使用bind 方法扩展mobileinit 事件，来覆盖默认配置（全局选项）。下面的代码改善按钮按下/划过的状态感觉反应有些迟缓的问题。
$(document).bind("mobileinit", function(){
/**
按钮按下/划过的状态感觉反应有些迟缓
*/
$.mobile.buttonMarkup.hoverDelay = "false";//按钮延迟效果取消
$.mobile.defaultTransition = "slidedown";
$.mobile.ajaxLinksEnabled = false; // 禁用Ajax提交
$.mobile.ajaxFormsEnabled = false; // 禁用Ajax提交
$.mobile.ajaxEnabled = false; //禁用Ajax提交
});
$.mobile 对象是设置所有属性的起始点
1.2.2jQuery Mobile Initialization 事件
1、事件的主要过程
当jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：
1)在页面创建前
2)页面创建
3)页面初始化
每个阶段触发的事件都可用于插入或操作代码。
2、主要的事件执行的时机
3、代码示例
$(document).on("pagebeforecreate",function(event){
alert("触发pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
alert("触发pagecreate 事件！");
});
$(document).on("pageinit",function(event){
alert("触发pageinit 事件！")
});
1.2.3jQuery Mobile Load 事件
1、页面加载事件属于外部页面。
无论外部页面何时载入DOM，将触发两个事件。第一个是pagebeforeload，第二个是pageload （成功）或pageloadfailed（失败）。
2、主要的事件执行的时机
3、代码示例
$(document).on("pageload",function(event,data){
alert("触发pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
1.2.4jQuery Mobile 过渡事件
1、还可以在从一页过渡到下一页时使用事件
页面过渡涉及两个页面：一张“来”的页面和一张“去”的页面- 这些过渡使当前活动页面（“来的”页面）到新页面（“去的”页面的改变过程变得更加动感。
2、主要的事件执行的时机
3、代码示例
$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
alert("现在隐藏页面二");
});