1. 引言jQuery Mobile 是一套基于 HTML5 的移动端 UI 框架它最大的特点之一就是采用「页面Page」作为组织内容的基本单位。在单页应用中多个页面通过 Ajax 加载和切换而这一过程伴随着一系列生命周期事件。理解这些页面事件是掌握 jQuery Mobile 页面导航、数据初始化和动态内容加载的关键。本文将系统梳理 jQuery Mobile 的页面事件体系包括页面初始化事件、页面切换事件、页面容器事件并结合丰富的代码实例演示每个事件的触发时机和典型用法。2. 页面事件概览jQuery Mobile 的页面事件主要分为三大类页面初始化事件pagebeforecreate、pagecreate、pageinit在页面首次创建时依次触发。页面切换事件pagebeforeshow、pageshow、pagebeforehide、pagehide在页面显示和隐藏时触发。页面容器事件pagecontainerbeforetransition、pagecontainerchange等作用于整个页面容器。下面这张表汇总了常用页面事件及其触发时机事件名称触发时机典型用途pagebeforecreate页面即将创建、尚未初始化组件时在框架增强前修改页面 DOMpagecreate页面已创建组件增强完成前绑定自定义事件、初始化第三方插件pageinit页面初始化完成组件增强结束后执行页面级初始化逻辑pagebeforeshow页面即将显示切换动画开始前动态更新页面数据pageshow页面显示完成切换动画结束后统计曝光、启动轮播等pagebeforehide当前页面即将隐藏时暂停视频、保存表单状态pagehide当前页面隐藏完成后清理定时器、释放资源3. 页面初始化事件页面初始化事件在页面第一次被创建时触发是绑定页面级逻辑的最佳时机。下面通过一个完整示例演示三个初始化事件的触发顺序。3.1 基础示例观察初始化顺序!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title页面初始化事件演示/title link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body div>div>!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title页面切换事件演示/title link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body !-- 页面 A -- div>pagebeforehide: 页面 A 即将隐藏 pagebeforeshow: 页面 B 即将显示 pageshow: 页面 B 显示完成 pagehide: 页面 A 已隐藏4.2 在 pagebeforeshow 中动态加载数据pagebeforeshow是动态更新页面内容的推荐位置因为此时页面尚未显示用户不会看到数据刷新的过程。div>!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title页面容器事件演示/title link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body div>div>script // 推荐事件委托 $(document).on(pageinit, #dynamicPage, function () { console.log(动态页面初始化完成); }); // 不推荐直接绑定动态加载的页面可能无法触发 // $(#dynamicPage).on(pageinit, function () { // console.log(可能不会触发); // }); /script6.2 区分 pageinit 与 pageshowpageinit只在页面首次创建时触发一次而pageshow每次页面显示时都会触发。如果需要在每次进入页面时刷新数据应使用pageshow或pagebeforeshow。script var initCount 0; var showCount 0; $(document).on(pageinit, #counterPage, function () { initCount; console.log(pageinit 触发次数 initCount); }); $(document).on(pageshow, #counterPage, function () { showCount; console.log(pageshow 触发次数 showCount); }); /script6.3 避免重复绑定当页面被反复访问时如果事件绑定代码在pageshow中执行会导致事件重复绑定。应将一次性绑定逻辑放在pageinit或pagecreate中。script $(document).on(pageinit, #repeatPage, function () { // 只绑定一次避免重复 $(#refreshBtn).off(click).on(click, function () { loadData(); }); }); /script7. 综合实战待办事项应用下面结合本文介绍的所有知识点实现一个完整的待办事项应用包含页面初始化、页面切换和动态数据加载。!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title待办事项应用/title link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body !-- 列表页 -- div data-rolepage idlistPage div data-roleheader h1待办事项/h1 /div div data-rolecontent ul idtodoList data-rolelistview data-insettrue/ul a href#addPage classui-btn ui-btn-icon-left ui-icon-plus新增待办/a /div /div !-- 新增页 -- div data-rolepage idaddPage div data-roleheader h1新增待办/h1 /div div data-rolecontent form idaddForm label fortodoTitle事项内容/label input typetext idtodoTitle placeholder请输入待办事项 button typesubmit classui-btn保存/button /form /div /div script var todos []; // 列表页初始化绑定事件 $(document).on(pageinit, #listPage, function () { $(#addForm).on(submit, function (e) { e.preventDefault(); var title $(#todoTitle).val().trim(); if (title) { todos.push(title); $(#todoTitle).val(); $.mobile.pageContainer.pagecontainer(change, #listPage, { transition: slide, reverse: true }); } }); }); // 列表页每次显示时刷新数据 $(document).on(pagebeforeshow, #listPage, function () { var list $(#todoList).empty(); if (todos.length 0) { list.append(li暂无待办事项/li); } else { $.each(todos, function (index, item) { list.append(li item /li); }); } list.listview(refresh); }); // 新增页显示时清空输入框 $(document).on(pagebeforeshow, #addPage, function () { $(#todoTitle).val(); }); // 全局页面切换日志 $(document).on(pagecontainerchange, function (event, ui) { console.log(当前页面 ui.toPage[0].id); }); /script /body /html8. 总结jQuery Mobile 的页面事件体系围绕页面生命周期展开掌握它们能够帮助开发者更好地控制页面初始化、数据加载和资源释放。以下是本文的核心要点初始化事件pagebeforecreate、pagecreate、pageinit依次触发适合完成页面级初始化逻辑。切换事件pagebeforeshow、pageshow、pagebeforehide、pagehide在页面显示和隐藏时触发适合动态更新数据和清理资源。容器事件pagecontainerbeforetransition、pagecontainerchange作用于全局页面切换过程。绑定方式推荐使用事件委托将事件绑定在document上避免动态加载页面无法触发事件。触发次数pageinit只触发一次pageshow每次显示都会触发根据需求选择合适的事件。在实际项目中建议将页面初始化逻辑放在pageinit中将每次进入页面需要刷新的数据放在pagebeforeshow中将资源清理逻辑放在pagehide中这样既能保证性能又能确保页面状态始终正确。