下面是 jQuery Mobile（1.4.x 版本）最常用、最重要的事件完整清单，截至 2025 年这些事件依然是开发和维护旧项目时的标准参考。
一、页面事件（Page Events）—— 最核心的事件
这些事件在每个 data-role="page" 的 div 上触发，按页面生命周期顺序排列：
| 事件 | 触发时机 | 常见用途 |
|---|---|---|
pagebeforecreate | 页面开始初始化，但还没增强控件之前 | 适合动态修改 HTML 结构 |
pagecreate | 页面控件增强完成（只触发一次） | 绑定事件、初始化插件的首选时机 |
pageinit | 页面初始化完成（已废弃，推荐用 pagecreate） | 旧代码常见 |
pagebeforehide | 页面即将被隐藏（切换到另一个页面前） | 清理定时器、暂停视频等 |
pagebeforeshow | 页面即将显示 | 加载数据、刷新内容 |
pagehide | 页面已经隐藏 | 清理资源 |
pageshow | 页面已经显示完成 | 第一次显示或从缓存返回时都会触发 |
pagebeforechange | 全局：任何页面跳转前 | 拦截跳转、登录校验 |
pagechange | 全局：页面跳转完成 | 统计、动画后处理 |
pagechangefailed | 页面跳转失败（如 hash 找不到页面） | 404 处理 |
推荐写法（2025 年仍建议这样写）：
$(document).on("pagecreate", "#myPageId", function() {
// 只执行一次，安全高效
$("#myButton").on("click", function(){ ... });
});
$(document).on("pageshow", "#myPageId", function() {
// 每次进入页面都会执行（包括从后退缓存回来）
refreshData();
});二、触摸 & 手势事件（Touch & Gesture Events）
jQuery Mobile 封装了非常好用的手势事件，直接在任何元素上使用即可：
| 事件 | 说明 | 等价原生事件 |
|---|---|---|
tap | 轻触（比 click 更快、更准） | touchstart + touchend |
taphold | 长按（默认 750ms） | touchstart 持续 |
swipe | 水平滑动（默认 30px，750ms 内） | – |
swipeleft | 向左滑动 | – |
swiperight | 向右滑动 | – |
scrollstart | 开始滚动 | – |
scrollstop | 停止滚动（约 300ms 无滚动后触发） | – |
示例：左右滑动切换页面
$(document).on("swipeleft swiperight", ".ui-page", function(e) {
if (e.type === "swipeleft") {
$.mobile.changePage(nextPage);
} else if (e.type === "swiperight") {
$.mobile.changePage(prevPage);
}
});三、虚拟鼠标事件（Virtual Mouse Events）
jQuery Mobile 把 touch、mouse、pointer 统一封装成以下事件（推荐使用这些，兼容性最好）：
| 事件 | 说明 |
|---|---|
vmouseover | 鼠标/手指进入 |
vmousedown | 按下 |
vmousemove | 移动 |
vmouseup | 抬起 |
vclick | 点击（推荐代替 click） |
vmousecancel | 取消（滑动时触发） |
四、表单 & 控件事件
| 控件 | 常用事件 | 说明 |
|---|---|---|
| Slider | slidestart slidestop slide | 拖动开始、结束、拖动过程中 |
| Flip switch | create（初始化后） | 动态创建后要手动触发 |
| Collapsible | collapse expand | 折叠/展开时触发 |
| Listview | listviewcreate | 初始化完成 |
| Popup | popupbeforeposition popupafteropen popupafterclose | 弹出层生命周期 |
Slider 实时取值示例：
$(document).on("slide", "#mySlider", function(e, ui) {
$("#valueLabel").text(ui.value);
});五、方向事件（Orientation Change）
$(window).on("orientationchange", function(event) {
console.log(event.orientation); // "portrait" 或 "landscape"
});六、实用的事件绑定技巧（2025 年推荐写法）
// 1. 推荐：事件委托 + 页面事件（性能最好）
$(document).on("pagecreate", function() {
// 所有页面都会执行一次
});
$(document).on("pageshow", "#page1", function() {
// 只在 page1 显示时执行
});
// 2. 触摸事件
$(document).on("tap", ".back-btn", function() {
history.back();
});
$(document).on("taphold", ".list-item", function() {
// 长按显示删除菜单
});七、jQuery Mobile 已停止维护，怎么办？
- 事件系统仍然 100% 可用（因为就是基于 jQuery）
- 如果你正在维护旧项目：继续用上面的事件，完全没问题
- 如果你要开发新项目：强烈建议改用 Framework7、Ionic、Quasar 或原生 + Hammer.js
需要我给你一份「所有 jQuery Mobile 事件一页纸速查表（PDF/图片版）」或者「常见事件完整 demo 代码包」吗？直接说一声就发你！
