pageinit 和 pageshow 的区别答案

【问题标题】：Differences between pageinit and pageshowpageinit 和 pageshow 的区别
【发布时间】：2013-03-20 20:37:39
【问题描述】：

我使用 jQuery Mobile 1.2 创建了一个简单的 web 应用程序。这个应用程序由一个主页 index.html 和一个名为 settings.html 的第二个页面组成。主页在页眉部分包含一个按钮，用于打开设置页面：

<div data-role="header">
    <h1>Main</h1>
    <a href="settings.html">Settings</a>
</div><!-- /header -->

在设置对话框中，用户应该能够更改程序选项。为此，我实现了一个函数来在每次对话框打开时设置当前选项：

$(document).on("pageinit", "#page-settings", function() {
    // numeric text field to change the year of date (settings is an array)
    $("#text-year").val(settings.year);
    ...
});

到目前为止一切正常。

现在我了解到还有一些事件，例如“pagebeforeshow”和“pageshow”。但我不明白这些事件之间的区别。我对触发器进行了如下测试：

$(document).on("pageinit", "#page-settings", function() {
    alert("pageinit");
});
$(document).on("pagebeforeshow", "#page-settings", function() {
    alert("pagebeforeshow");
});
$(document).on("pageshow", "#page-settings", function() {
    alert("pageshow");
});

如果我单击主页上的按钮，则所有三个事件都会触发并显示所有警报。那么为什么会有不同的事件呢？我应该在我的设置场景中使用哪一个？

我认为过程如下：我第一次进入我的索引页面，该页面上的所有元素都添加到 DOM 中，然后触发 index 的 pageinit 和 pageshow 事件。然后我单击链接并切换到设置页面，设置页面的所有元素都添加到 DOM 中，并且触发设置的事件 pageinit 和 pageshow。到目前为止还好。然后我回到索引页面。因为索引元素仍在 DOM 中，只有 pageshow 事件正在触发。然后我再次单击设置链接。设置元素也应该在 DOM 中，所以只有 pageshow 应该再次触发。但问题是每次我更改页面时都会触发所有事件。所以问题是：为什么会有不同的事件？我应该在哪里放置文本框的填充或按钮点击的触发器？

【问题讨论】：

标签： jquery events web-applications mobile

【解决方案1】：

“pageinit”在 DOM 准备就绪时触发。这个有用当你想在你的页面被下载时初始化变量时。
“pagebeforeshow”在您的页面显示之前触发。你
当您需要在显示之前执行操作时可以使用此事件，
比如添加 div 或 HTML 结构。
页面显示时触发“pageshow”。我用这个事件来添加我的点击事件和其他事件。

您可以在文档中找到有关事件的更多信息： http://api.jquerymobile.com/category/events/

【讨论】：

好的，我了解其中的区别。