## data-callbackKeys

这里的`callbackKeys`只是一种统称，实际没有这个自定义属性的，指的是一系列回调写法，因为除了长相不一样，其他都类似，所以合在一起讲了。

其家庭成员包括：

- `data-onpagefirstinto` 页面第一次载入执行，过场刚开始即执行。

  语法：

      onpagefirstinto(pageInto, pageOut, options)

  其中`pageInto`表示进入的页面的DOM，`pageOut`表示离开的页面的DOM，`options`为可选参数，具体：

  - options.response 返回的数据。这个参数多半应用在Ajax请求时候。
  - options.target （触发过场）点击的页面元素。
  - options.id 页面标示`id`, 一般仅在`url`请求时候存在。
  - options.history 是否在浏览历史中添加一条记录。此属性大可不必关心。
  - options.remove 是否删除同`id`的页面。此属性大可不必关心。
  - options.query 执行载入的URL地址后面的查询参数。例如`#pageTarget?id=1`，此时`options.query`值是`{id: 1}`，又或者`/ajax/pageTarget.php?id=2`载入的页面，此时`options.query`值是`{id: 2}`。
- `data-callback` 页面每次进入都会执行，过场刚开始即执行。

  语法：

      callback(pageInto, pageOut, options)

- `data-fallback` 页面每次离开都会执行，过场刚开始即执行。

  语法：

      fallback(pageInto, pageOut, options)

- `data-animationstart` 页面动画即将开始执行的回调，离开页面，进入页面均会触发。

  语法：

      animationstart(page, intoOrOut, options)

- `data-animationend` 页面动画结束之后执行的回调，离开页面，进入页面均会触发。

  语法：

      animationend(page, intoOrOut, options)

- `data-preventdefault` 介入回调，可以用来中断Mobilebone的一些默认行为，可以过场等行为触发之前实现一些自定义行为。

  当使用在页面元素上时候的语法：

      preventdefault(pageInto, pageOut, options)

  当返回值为`true`的时候会阻断Mobilebone的一些默认行为。

每个回调的作用于使用场景可参见博文说明：点击这里。

其中，`data-preventdefault`并非`page`元素专有，`a`元素，`form`元素也支持此回调，具体可点击这里。

### 其他说明

`data-ajaxKeys`也是类似的集合API。

### 补充说明(2015-04-15)

有很多人问过静态页面间传参的问题。由于是单页，因此，可以设置个全局对象，专门负责参数传递，但是，有些人就是不想走全局对象传参，怎么办？

是这样的，如果你是点击`<a>`元素触发的过场，则所有的回调函数中的`options`这个参数（是个纯对象）中会有一个target属性，其值就是我们之前点击的`<a>`元素，于是，你就可以获得你想要的参数了。例如：

    <a href="load.html?id=111">页面111</a>

111可能是你想传递的参数，然后，就可以通过下面一行脚本获得：

    var id = options.target.href.replace(/\D/g, "");

更新于2019-05-15

页面间传参请使用options.query，v2.7.4+支持。

### 补充于2015-05-30(v2.5.8)

尤其当使用`data-callback`和`data-fallback`处理一些回调的时候，有可能前后两个页面结构一致，数据不一样，就很有可能出现`id`一致的情况，如果单纯使用`$("#ID")`或`document.querySelector("#ID")`, 则得到的元素并不是新页面你希望选择的元素。怎么办，请使用回调方法中的页面参数作为容器去获取对应的元素，例如：

    Mobilebone.callback = function(pagein) {
        // NOT: var element = document.querySelector("#ID");
        var element = pagein.querySelector("#ID");
        // do sth by using elememt...
    };

更新于2019-05-15

同一类别页面请使用`data-reload`控制，设置属性值为唯一的ID即可，可以避免同ID元素出现的情况。详见data-reload。