下面是 2025 年还在维护 jQuery Mobile 项目时 100% 会用到的、最全、最实用的「事件速查表」（基于 1.4.5 最终版），直接收藏，10 年不坏！
| 事件类别 | 事件名称 | 触发时机 / 说明 | 2025 年推荐写法（事件委托 + 页面生命周期） | 经典用途举例 |
|---|---|---|---|---|
| 页面生命周期 | pagebeforecreate | 页面 DOM 刚进来，还没增强控件（极早期） | $(document).on(“pagebeforecreate”, “#page1”, fn) | 动态插入 HTML |
pagecreate | 控件增强完成（只触发一次）← 最重要 | $(document).on(“pagecreate”, “#page1”, fn) ← 首选 | 初始化插件、绑定事件 | |
pageinit | 已废弃，等同 pagecreate（老代码常见） | 尽量别用，改用 pagecreate | – | |
pagebeforeshow | 每次即将显示（包括从缓存回来） | $(document).on(“pagebeforeshow”, “#page1”, fn) | 刷新数据、检查登录 | |
pageshow | 每次显示完成 | $(document).on(“pageshow”, “#page1”, fn) | 启动轮播、播放视频 | |
pagebeforehide / pagehide | 页面即将隐藏 / 已隐藏 | 清理定时器、暂停视频 | – | |
| 触摸手势 | tap | 最快最准的“点击”（替代 click） | $(document).on(“tap”, “.btn”, fn) | 所有按钮点击 |
taphold | 长按 ≥750ms（可改阈值） | $(document).on(“taphold”, “.item”, fn) | 长按删除、复制 | |
swipeleft / swiperight | 左右滑动 ≥30px | $(document).on(“swipeleft”, “.item”, fn) | 左滑删除、右滑返回 | |
swipe | 任意方向滑动 | 一般不用，改用具体方向 | – | |
| 滚屏事件 | scrollstart | 开始滚动（立刻触发） | $(document).on(“scrollstart”, fn) | 隐藏键盘、浮动栏 |
scrollstop | 停止滚动 ≈300ms 后（自带节流） | $(document).on(“scrollstop”, fn) | 无限加载、回到顶部 | |
| 方向改变 | orientationchange | 手机横竖屏切换 | $(window).on(“orientationchange”, function(e){ console.log(e.orientation) }) | 横竖屏适配、重新布局 |
| 虚拟鼠标 | vclick | 统一 click（比原生 click 快） | 基本不用 tap 就够了 | – |
| 表单控件 | slide / slidestop | 滑块拖动中 / 拖动结束 | $(“#slider”).on(“slide”, fn) | 实时显示值 |
change | select、checkbox、flipswitch 改变 | 正常使用 | – | |
| 弹出层 | popupbeforeposition | popup 即将定位 | $(document).on(“popupbeforeposition”, “#mypopup”, fn) | 计算位置 |
popupafteropen / popupafterclose | 打开后 / 关闭后 | 常用 | 聚焦输入框 |
2025 年最推荐的万能写法（复制粘贴就行）
// 1. 页面初始化（只执行一次）
$(document).on("pagecreate", "#page-list", function () {
// 绑定事件、初始化插件
});
// 2. 每次进入页面（包括后退缓存回来）
$(document).on("pageshow", "#page-list", function () {
renderList(); // 刷新数据
startTimer(); // 启动倒计时
});
// 3. 触摸事件（事件委托，动态元素也生效）
$(document).on("tap", ".back-btn", function (e) { e.preventDefault(); history.back(); });
$(document).on("taphold", ".list-item", function () { alert("长按了"); });
$(document).on("swipeleft", ".list-item", function () { $(this).addClass("delete"); });
// 4. 滚屏事件（全站通用）
$(document).on({
scrollstart: function () { $("input:focus").blur(); }, // 收键盘
scrollstop: function () { if (到页面底部) loadMore(); } // 加载更多
});
// 5. 横竖屏
$(window).on("orientationchange", function (e) {
$("body").toggleClass("landscape", e.orientation === "landscape");
setTimeout(function () { $.mobile.activePage.trigger("updatelayout"); }, 100);
});2025 年必背的 8 个核心事件（记住了就够吃一辈子）
| 排名 | 事件组合 | 用途 |
|---|---|---|
| 1 | pagecreate + pageshow | 初始化 + 每次刷新 |
| 2 | tap | 所有点击 |
| 3 | swipeleft / swiperight | 滑动删除、翻页 |
| 4 | scrollstop | 无限加载 |
| 5 | orientationchange | 横竖屏适配 |
| 6 | taphold | 长按菜单 |
| 7 | pagebeforeshow | 登录校验、加载最新数据 |
| 8 | popupafterclose | 关闭弹窗后刷新列表 |
把上面这张表保存到手机里，下次维护老项目、面试被问 jQuery Mobile，直接甩出来就行！
需要我给你打包一个 「jQuery Mobile 事件一页纸速查表（高清 PDF + 深色版）」 或者 「30 个经典事件完整 Demo 合集」，随时说一声，立即发你！
