html5教程-HTML5开发移动web应用―JQuery Mobile(4)-事件

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

jq uery mobile 中提供了丰富的 事件处理 和检测机制。

1.滚动事件

在Jquery Mobile中，使用scrollStart和scrollStop事件来监听用户 开始 滚动和停止滚动的事件。以scrollStart 为例 ，使用代码如下：

 $(document).on("scrollstart",function(){   alert("开始滚动！"); }); 

2.界面相关的事件

一个页面从激活到加载完毕，在jquery mobile中共被分为四个部分的事件，它们分别是：

Page In IT ialization - 在页面创建前，当页面创建时，以及在页面初始化之后

Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时

Page Transition - 在页面过渡之前和之后

Page Change - 当页面被更改，或遭遇失败时

其中，在页面初始化的部分，jquery mobile又将其分为页面创建前(pagebeforecreate)/页面创建(pagecreate)/页面初始化(pag ei nit)这三个 阶段 ，在每个阶段中都可以执行相应的动作，示例代码如下：

 $(document).on("pagebeforecreate",function(event){   alert(" pagebeforecreate "); });  $(document).on("pagecreate",function(event){   alert(" pagecreate "); }); $(document).on("pageinit",function(event){   alert(" pageinit ") }); 

3.关于设备 方向

下面是来自w3cschool的实例代码，可以监听设备方向的变化，并在设备方向变化后设置不同的样式;

 $(window).on(" orientation change",function(){   if(window.orientation  ==  0) // Portr ai t   {     $("p").css({"background-color":"yellow","font -s ize":"300%"});   }   else // Landsca PE    {     $("p").css({"background-color":"pink","font-size":"200%"});   } }); 

&nbs p;

Jquery Mobile中提供了丰富的事件处理和检测机制。

1.滚动事件

在Jquery Mobile中，使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件。以scrollStart为例，使用代码如下：

 $(document).on("scrollstart",function(){   alert("开始滚动！"); }); 

2.界面相关的事件

一个页面从激活到加载完毕，在jquery mobile中共被分为四个部分的事件，它们分别是：

Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后

Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时

Page Transition - 在页面过渡之前和之后

Page Change - 当页面被更改，或遭遇失败时

其中，在页面初始化的部分，jquery mobile又将其分为页面创建前(pagebeforecreate)/页面创建(pagecreate)/页面初始化(pageinit)这三个阶段，在每个阶段中都可以执行相应的动作，示例代码如下：

 $(document).on("pagebeforecreate",function(event){   alert(" pagebeforecreate "); });  $(document).on("pagecreate",function(event){   alert(" pagecreate "); }); $(document).on("pageinit",function(event){   alert(" pageinit ") }); 

3.关于设备方向

下面是来自w3cschool的实例代码，可以监听设备方向的变化，并在设备方向变化后设置不同的样式;

 $(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%"});   } }); 

 

觉得 可用，就经常来吧！ 欢迎评论哦！  html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-HTML5开发移动web应用―JQuery Mobile(4)-事件 全部内容，希望文章能够帮你解决 html5教程-HTML5开发移动web应用―JQuery Mobile(4)-事件 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-HTML5开发移动web应用―JQuery Mobile(4)-事件的详细内容...