javascript jQuery Mobile：页面事件触发的顺序是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14010140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile : What is the order of page events triggering?
提问by Michael
I have to build fast a prototype for an application and I would like to know exactly where to insert various application logic.
我必须为应用程序快速构建原型，我想确切地知道在何处插入各种应用程序逻辑。
Could you iterate the events and the order in which they trigger when using PhoneGap and jQueryMobile?
你能在使用 PhoneGap 和 jQueryMobile 时迭代事件和它们触发的顺序吗？
It would be great to have a clear understanding of events/order for:
对以下事件/顺序有清楚的了解会很棒：
- A: When you open the application for the first time.
- B: When you change page(I guess there won't be some of the events anymore).
- C: When you "minimize" the app(Ex: when you click a link in the app which takes you to sms/call, or you just press device's home button).
- D: When you restore the app(Ex: hitting the "back" button, or just
"maximize" it somehow).
- A：当您第一次打开应用程序时。
- B：当你换页时（我想不会再有一些事件了）。
- C：当您“最小化”应用程序时（例如：当您单击应用程序中的链接以发送短信/通话时，或者您只需按下设备的主页按钮时）。
- D：当您恢复应用程序时（例如：点击“返回”按钮，或者只是
以某种方式“最大化”它）。
回答by Gajotres
Intro
介绍
All information found here can also be found in my blog ARTICLE, you will also find working examples.
在这里找到的所有信息也可以在我的博客文章中找到，您还将找到工作示例。
- A: Initialization
- A：初始化
A1 - Phonegap app/framework initialization with the deviceReadyevent.
A1 - 使用deviceReady事件初始化 Phonegap 应用程序/框架。
Example:
例子：
document.addEventListener("deviceReady", yourCallbackFunction, false);
function deviceReady() {
}
More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
更多关于暂停甚至可以在这里找到：http: //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
A2 - jQuery Mobile app/framework initialization with the mobileinitevent.
A2 - 使用mobileinit事件初始化 jQuery Mobile 应用程序/框架。
Example:
例子：
$(document).on("mobileinit", function () {
});
How to check if both frameworks are successfully loaded: https://stackoverflow.com/a/12821151/1848600
如何检查两个框架是否都成功加载：https: //stackoverflow.com/a/12821151/1848600
- B: Change page
- B：更改页面
First all events can be found here: http://jquerymobile.com/test/docs/api/events.html
首先可以在这里找到所有事件：http: //jquerymobile.com/test/docs/api/events.html
Lets say we have a page A and a page B, this is a unload/load order:
假设我们有一个页面 A 和一个页面 B，这是一个卸载/加载顺序：
1. page B - event pagebeforecreate
2. page B - event pagecreate
3. page B - event pageinit
4. page A - event pagebeforehide
5. page B - event pagebeforeshow
6. page A - event pageremove
7. page A - event pagehide
8. page B - event pageshow
- C: Minimize app
- C：最小化应用程序
Phonegap handles this with a pauseevent.
Phonegap 通过一个暂停事件来处理这个问题。
Example:
例子：
document.addEventListener("pause", yourCallbackFunction, false);
More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
更多关于暂停甚至可以在这里找到：http: //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
- D: Restore app
- D：恢复应用
Phonegap handles this with a resumeevent.
Phonegap 通过一个恢复事件来处理这个问题。
Example:
例子：
document.addEventListener("resume", yourCallbackFunction, false);
More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
更多关于暂停甚至可以在这里找到：http: //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
- Final words
- 最后的话
There are few other phonegap and jQM events and you can find them in links mentioned above.
很少有其他 phonegap 和 jQM 事件，您可以在上面提到的链接中找到它们。
Something you should not use in jQM app:
你不应该在 jQM 应用程序中使用的东西：
$(document).ready(function(){
});
Reason:
原因：
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
您在 jQuery 中学习的第一件事是在 $(document).ready() 函数中调用代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。
