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は非同期で発生するっぽい。