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);
});