jQuery移动web开发中的页面初始化与加载事件

jQuery移动Web开发中的页面初始化与加载事件详解

在JavaScript移动端页面开发中，了解和掌握jQuery Mobile的页面初始化与加载事件是非常关键的。这对于任何致力于创建流畅、响应式移动Web应用的朋友来说都是基础中的基础。

页面初始化事件（pagebeforecreate、pagecreate）

在jQuery Mobile中，页面初始化涉及到一些重要的插件行为。例如，对于具有特定属性（如type=range）的input输入框，jQuery Mobile会自动生成一个自定义滑动条。这些自动初始化的行为背后是"page"插件，它在初始化前后部署事件，允许开发者在页面初始化前后进行操作，甚至可以自定义初始化行为。值得注意的是，这些页面初始化事件在每个页面中只触发一次。

当页面初始化之前，会触发`pagebeforecreate`事件。而在页面完成初始化后，则会触发`pagecreate`事件。你可以通过以下方式绑定这些事件：

```javascript

$('aboutPage').live('pagebeforecreate', function(event){

alert('This page was just inserted into the DOM!');

});

$('aboutPage').live('pagecreate', function(event){

alert('This page was just enhanced by jQuery Mobile!');

});

```

通过绑定`pagebeforecreate`并返回false，你可以禁止页面插件的默认操作。为了确保这些函数在初始化页面加载时被调用，一定要在jQuery Mobile执行前绑定它们。可以在`mobileinit`事件的处理函数中进行此操作。

页面加载事件（pagebeforeload、pageload）

当外部页面加载到DOM中时，会触发两个关键事件：`pagebeforeload`和`pageload`（或`pageloadfailed`）。

在加载请求发出之前，会触发`pagebeforeload`事件。你可以绑定一个回调函数到这个事件，并在其中调用`preventDefault()`来表明由你自己处理加载请求。你需要对通过数据对象传入的回调对象调用`resolve()`或`reject()`方法。这个回调对象包含以下属性：

url：加载页面的相对或绝对地址。

absUrl：url的绝对地址版本。

dataUrl：用于识别页面或更新浏览器地址的绝对地址的过滤版本。

deferred：针对此事件调用`preventDefault()`的回调需要在此事件上调用resolve或reject方法，以允许changePage()请求恢复。

例如：

```javascript

$(document).bind("pagebeforeload", function(event, data){

// 让jQuery Mobile框架知道由我们来处理load事件.

event.preventDefault();

data.deferred.resolve(data.absUrl, data.options, page);

});

```