読者です 読者をやめる 読者になる 読者になる

jQuery MobileのEventの発生順

ちょっと自分でやってみた

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>

  <script type="text/javascript">
    function l(s) {
      if (s.target) {
        console.log("[log]["+s.type+"]"+s.target.tagName+(s.target.id ? "#"+s.target.id : "")+_(s.target.classList).map(function(c){return "."+c;}).join(""));
      } else {
        console.log("[log]"+s);
      }
    };
    $(document).on("pagebeforechange", function(ev) {l(ev);});
    $(document).on("pagebeforecreate", function(ev) {l(ev);});
    $(document).on("pagebeforehide", function(ev) {l(ev);});
    $(document).on("pagebeforeload", function(ev) {l(ev);});
    $(document).on("pagebeforeshow", function(ev) {l(ev);});
    $(document).on("pagechange", function(ev) {l(ev);});
    $(document).on("pagecreate", function(ev) {l(ev);});
    $(document).on("pagehide", function(ev) {l(ev);});
    $(document).on("pageinit", function(ev) {l(ev);});
    $(document).on("pageload", function(ev) {l(ev);});
    $(document).on("pageremove", function(ev) {l(ev);});
    $(document).on("pageshow", function(ev) {l(ev);});

    $(document).on("mobileinit", function(){
      $.mobile.hashListeningEnabled = false;
      $.mobile.linkBindingEnabled = false;
      $.mobile.ajaxEnabled = false;
      $.mobile.autoInitializePage = false;
      $.mobile.page.prototype.options.domCache = false;

      $.mobile.pushStatueEnabled = false;
      $.mobile.page.prototype.options.degradeInputs.date = true;
    });

    window.onload = function(){
      l("$.mobile.initializePage");
      $.mobile.initializePage(); // $.mobile.autoInitializePage = falseにしているので
      l("$.mobile.initializePage:called");
    };

    $(document).on("click", "button", function(ev){
      var target = $(ev.target).parents("[data-role=page]").attr("id") == "main"?"sub":"main"
      l("$.mobile.changePage");
      $.mobile.changePage("#"+target,{changeHash: false, role: "page"});
      l("$.mobile.changePage:called");
    });
  </script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.2/jquery.mobile.js"></script>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.2/jquery.mobile.css"></script>
</head>
<body>
  <div data-role="page" id="main">
    <div data-role="context">
      <a data-role="button" href="#sub">hello jQM</a>
      <button>hello jQM</button>
    </div>
  </div>
  <div data-role="page" id="sub">
    <div data-role="context">
      <a data-role="button" href="#main">hello jQM sub</a>
      <button>hello jQM sub</button>
    </div>
  </div>
</body>
</html>
[log]$.mobile.initializePage jqm_event.html:12
[log][pagebeforechange]BODY.ui-mobile-viewport jqm_event.html:10
[log][pagebeforecreate]DIV#main jqm_event.html:10
[log][pagecreate]DIV#main.ui-page.ui-body-c jqm_event.html:10
[log][pageinit]DIV#main.ui-page.ui-body-c jqm_event.html:10
[log][pagebeforeshow]DIV#main.ui-page.ui-body-c jqm_event.html:10
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js:3345
[log][pageshow]DIV#main.ui-page.ui-body-c.ui-page-active jqm_event.html:10
[log][pagechange]BODY.ui-mobile-viewport.ui-overlay-c jqm_event.html:10
[log]$.mobile.initializePage:called jqm_event.html:12
[log]$.mobile.changePage jqm_event.html:12
[log][pagebeforechange]BODY.ui-mobile-viewport.ui-overlay-c jqm_event.html:10
[log][pagebeforecreate]DIV#sub jqm_event.html:10
[log][pagecreate]DIV#sub.ui-page.ui-body-c jqm_event.html:10
[log][pageinit]DIV#sub.ui-page.ui-body-c jqm_event.html:10
[log][pagebeforechange]BODY.ui-mobile-viewport.ui-overlay-c jqm_event.html:10
[log][pagebeforehide]DIV#main.ui-page.ui-body-c.ui-page-active jqm_event.html:10
[log][pagebeforeshow]DIV#sub.ui-page.ui-body-c jqm_event.html:10
[log]$.mobile.changePage:called jqm_event.html:12
[log][pagehide]DIV#main.ui-page.ui-body-c jqm_event.html:10
[log][pageshow]DIV#sub.ui-page.ui-body-c.ui-page-active jqm_event.html:10
[log][pagechange]BODY.ui-mobile-viewport.ui-overlay-c jqm_event.html:10
[log]$.mobile.changePage jqm_event.html:12
[log][pagebeforechange]BODY.ui-mobile-viewport.ui-overlay-c jqm_event.html:10
[log][pagebeforechange]BODY.ui-mobile-viewport.ui-overlay-c jqm_event.html:10
[log][pagebeforehide]DIV#sub.ui-page.ui-body-c.ui-page-active jqm_event.html:10
[log][pagebeforeshow]DIV#main.ui-page.ui-body-c jqm_event.html:10
[log]$.mobile.changePage:called jqm_event.html:12
[log][pagehide]DIV#sub.ui-page.ui-body-c jqm_event.html:10
[log][pageshow]DIV#main.ui-page.ui-body-c.ui-page-active jqm_event.html:10
[log][pagechange]BODY.ui-mobile-viewport.ui-overlay-c 

ソースまで見てないけど$.mobile.initializePageはpagechangeまで同期で、$.mobile.changePageはpagebeforeshowまでが同期でpagehide/pageshow/pagechangeは非同期で発生するっぽい。

参考

グローバル設定 | jQuery Mobile 1.1.0 日本語リファレンス