{"id":878,"date":"2013-01-10T16:50:21","date_gmt":"2013-01-10T16:50:21","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=878"},"modified":"2022-02-17T07:14:46","modified_gmt":"2022-02-17T07:14:46","slug":"page-events","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/jquery-mobile\/pages\/page-events","title":{"rendered":"Page Events"},"content":{"rendered":"<p>\n&nbsp;\n<\/p>\n<h4>\nPage Creation Events<br \/>\n<\/h4>\n<p>\nEach page has its own creation or initialization events\n<\/p>\n<p>\npagebeforecreate\n<\/p>\n<p style=\"margin-left: 40px;\">\nAfter the page is inserted in the DOM and before its widgets are created.\n<\/p>\n<p>\npagecreate\n<\/p>\n<p style=\"margin-left: 40px;\">\nAfter the page is created but before widgets are rendered.\n<\/p>\n<p>\npageinit\n<\/p>\n<p style=\"margin-left: 40px;\">\nAfter the page is fully loaded. Normally the most used event for a page.\n<\/p>\n<p>\npageremove\n<\/p>\n<p style=\"margin-left: 40px;\">\nAfter the page was removed from the DOM (usually when it was an AJAX-loaded page that is not currently the active page). For example you can bind a pageinit event using the jQuery live method:\n<\/p>\n<pre>\r\n<code>\r\n$(&quot;#page2&quot;).live(&quot;pageinit&quot;, function(event) {\r\n});\r\n<\/code><\/pre>\n<p>\n&nbsp;\n<\/p>\n<h4>\nLoading events<br \/>\n<\/h4>\n<p>\nFor every page loaded using AJAX there are special event handlers that usually are bound to $(document) because the pages are not in the DOM yet to bind the handler to.<br \/>\nThe available loading events are:\n<\/p>\n<p>\npagebeforeload\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted before any AJAX request is done\n<\/p>\n<p>\npageload\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted after the page was loaded and inserted into the DOM\n<\/p>\n<p>\npageloadfailed\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted when the page could not be loaded\n<\/p>\n<h4>\nShowing events<br \/>\n<\/h4>\n<p>\npagebeforechange\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted before the change is made and before any transition begins\n<\/p>\n<p>\npagechange\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted after the change is done\n<\/p>\n<p>\npagechangefailed\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted if the change could not be done\n<\/p>\n<h4>\nOrientation Event<br \/>\n<\/h4>\n<p>\norientationchange\n<\/p>\n<p style=\"margin-left: 40px;\">\nMobile device has changed orientation.\n<\/p>\n<p style=\"margin-left: 40px;\">\nThis event is currently linked to resize on some platforms where native orientationchange is not supported.&nbsp;On some platforms, when the orientationchange event is fired the window frame is still old so you will not get the right width\/ height values.&nbsp;\n<\/p>\n<pre>\r\n<code>\r\n$(document).bind(&quot;orientationchange&quot;, function(orientation) {\r\n\tif (orientation == &quot;landscape&quot;) {\r\n\t\t\/\/ We are now in landscape\r\n\t}\r\n\telse\r\n\t{\r\n\t\t\/\/ We are now in portrait\r\n\t}\r\n});\r\n<\/code><\/pre>\n<p>\n&nbsp;\n<\/p>\n<h4>\nGesture Events<br \/>\n<\/h4>\n<p>\njQuery Mobile provides gesture touch events that you can bind to any DOM element.\n<\/p>\n<p>\ntap\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted after a quick touch on the screen.\n<\/p>\n<p>\ntaphold\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted when the user touches the screen and maintains it pressed for one second (useful for showing contextual menus).\n<\/p>\n<p>\nswipeleft\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted when the user swipes a finger from right to left.\n<\/p>\n<p>\nswiperight\n<\/p>\n<p style=\"margin-left: 40px;\">\nExecuted when the user swipes a finger from left to right.\n<\/p>\n<pre>\r\n<code>\r\n$(document).bind(&quot;mobileinit&quot;, function() {\r\n\t$(&quot;#page2&quot;).live(&quot;swiperight&quot;, goBackToPage1);\r\n});\r\n\r\nfunction goBackToPage1() {\r\n\t$.mobile.changePage(&quot;#page1&quot;, { reverse: true });\r\n\t$(&quot;#page2&quot;).unbind(&quot;swiperight&quot;, goBackToPage1);\r\n}\r\n<\/code><\/pre>\n<h4>\nVirtual Click Events<br \/>\n<\/h4>\n<p>\nMost mobile touch web browsers have a delay of 300&ndash; 500 milliseconds when you are using click events (such as click, mouseover) and this delay is not there when you are using touch events (such as touchstart, touchmove). Also not every touch browser supports touch events. Virtual click events are wrappers that can be used instead of touch or click events and they will choose the right one depending on the platform being used. It also normalizes position information and can be used only for single touch (not multi-touch). Virtual click events can be used exactly the same as the click events, but the event name has a v prefix:- vclick, vmouseover, vmousedown, vmousemove, vmouseup, and vmousecancel.\n<\/p>\n<p>\n&nbsp;\n<\/p>\n<p>\n&nbsp;\n<\/p>\n<p>\n&nbsp;\n<\/p>\n<p>\n&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Page Creation Events Each page has its own creation or initialization events pagebeforecreate After the page is inserted in the DOM and before its widgets are created. pagecreate After the page is created but before widgets are rendered. pageinit After the page is fully loaded. Normally the most used event for a page. pageremove [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,86],"tags":[],"class_list":["post-878","post","type-post","status-publish","format-standard","hentry","category-events","category-pages"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=878"}],"version-history":[{"count":8,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/878\/revisions"}],"predecessor-version":[{"id":1362,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/878\/revisions\/1362"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}