jQueryMobile事件

1. 页面事件

1.1 Initialization

当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：

• 在页面创建前
• 页面创建
• 页面初始化

1.1.1 pagebeforecreate

当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件

1.1.2 pagecreate

当页面已创建，但增强完成之前，触发该事件

1.1.3 pageinit

当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件

示例代码：

html代码：

<div data-role="page" id="index" data-title="123">  <div data-role="header" data-position="fixed">    <h1>头部</h1>  </div>  <div role="main" class="ui-content">    <a href="#second" class="ui-btn" data-transition="slideup">      这是个链接    </a>  </div>  <div data-role="footer" data-position="fixed">    <h1>脚步</h1>  </div></div>

js代码：

$('#index').on('pagebeforecreate', function () {  console.log("pagebeforecreate");}).on('pagecreate', function () {  console.log("pagecreate");}).on('pageinit', function () {  console.log("pageinit");})

页面创建时会依次触发上述三个事件，在控制台中输出如下信息：

1.2 Load事件

页面加载事件属于外部页面。

无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。

1.2.1 pagebeforeload

在任何页面加载请求作出之前触发。

1.2.2 pageload

在页面已成功加载并插入 DOM 后触发。

1.2.3 pageloadfailed

如果页面加载请求失败，则触发该事件。默认地，将显示 “Error Loading Page” 消息。

html代码：

<div data-role="page" id="index" data-title="123">  <div data-role="header" data-position="fixed">    <h1>头部</h1>  </div>  <div role="main" class="ui-content">    <!--这里跳转外部链接-->    <a href="02_button.html">02_button</a>  </div>  <div data-role="footer" data-position="fixed">    <h1>脚步1</h1>  </div></div>

js代码：

$(document).on('pagebeforeload', function () {  console.log("pagebeforeload");}).on('pageload', function () {  console.log("pageload");}).on('pageloadfailed', function () {  console.log("pageloadfailed");})

1.3 过渡事件

从一页到另一页时的事件

1.3.1 pagebeforeshow

在”去的”页面触发，在过渡动画开始前

1.3.2 pageshow

在”去的”页面触发，在过渡动画完成后

1.3.3 pagebeforehide

在”来的”页面触发，在过渡动画开始前

1.3.4 pagehide

在”来的”页面触发，在过渡动画完成后

html代码:

<div data-role="page" id="index" data-title="123">  <div data-role="header" data-position="fixed">    <h1>头部1</h1>  </div>  <div role="main" class="ui-content">    <a href="#second" class="ui-btn" data-transition="slideup">      这是个链接1    </a>    <a href="02_button.html">02_button</a>  </div>  <div data-role="footer" data-position="fixed">    <h1>脚步1</h1>  </div></div><div data-role="page" id="second" data-fullscreen="true" data-theme = "b">  <div data-role="header" data-position="fixed">    <a data-icon = "back" data-role="button" href="#">回退</a>    <h1>头部2</h1>  </div>  <div role="main" class="ui-content">    <div class="ui-grid-a">      <div class="ui-block-a">        <input type="button" value="1" />      </div>      <div class="ui-block-b">        <input type="button" value="1" />      </div>      <div class="ui-bar-b">        <input type="button" value="1" />      </div>    </div>    <a href="#index" class="ui-btn" data-transition="pop">      跳回page1    </a></div><div data-role="footer" data-position="fixed">    <h1>脚步2</h1></div></div>

js代码：

$('#second').on('pagebeforeshow',function(){  console.log('pagebeforeshow')}).on('pageshow',function(){  console.log('pageshow')}).on('pagebeforehide',function(){  console.log('pagebeforehide')}).on('pagehide',function(){  console.log('pagehide')})

当打开page2时先后触发pagebeforeshow与pageshow事件，输出如下内容：

当从page2回到page1，也就是page2隐藏时，先后触发事件pagebeforehide与pagehide，输出如下内容:

2. 触摸事件

2.1 tap事件

相当于点击事件，示例代码如下：

html代码：

<button>按钮</button>

js代码：

$('button').on('tap',function () {    console.log('tap')})

2.2 taphold事件

长按事件

$('button').on("taphold",function(){  console.log('taphold')})

2.3 swipe事件

滑动事件，用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件

$('button').on('swipe', function(){  console.log('swipe')})

2.4 swipeleft

左滑动事件，在用户向左拖动元素大于30px时触发

$('button').on('swipeleft', function(){  console.log('swipeleft')})

2.5 swiperight

右滑动事件，用户向右拖动元素大于30px时触发：

$('button').on('swiperight', function(){  console.log('swiperight')})

3. 滚屏事件

jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发

3.1 scrollstart

scrollstart 事件是在用户开始滚动页面时触发

$(document).on("scrollstart",function(){  console.log("开始滚动!");});

3.2 scrollstop

scrollstop 事件是在用户停止滚动页面时触发

$(document).on("scrollstop",function(){  console.log("停止滚动!");});

4. 方向改变事件orientationchange

当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件

如需使用方向改变（orientationchange）事件，请附加它到 window 对象

在回调函数中，可以使用参数event对象，返回移动设备的方向：

$(window).on("orientationchange",function(event){  alert(event.orientation);});