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
After 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:
$("#page2").live("pageinit", function(event) {
});
Loading events
For 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.
The available loading events are:
pagebeforeload
Executed before any AJAX request is done
pageload
Executed after the page was loaded and inserted into the DOM
pageloadfailed
Executed when the page could not be loaded
Showing events
pagebeforechange
Executed before the change is made and before any transition begins
pagechange
Executed after the change is done
pagechangefailed
Executed if the change could not be done
Orientation Event
orientationchange
Mobile device has changed orientation.
This event is currently linked to resize on some platforms where native orientationchange is not supported. 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.
$(document).bind("orientationchange", function(orientation) {
if (orientation == "landscape") {
// We are now in landscape
}
else
{
// We are now in portrait
}
});
Gesture Events
jQuery Mobile provides gesture touch events that you can bind to any DOM element.
tap
Executed after a quick touch on the screen.
taphold
Executed when the user touches the screen and maintains it pressed for one second (useful for showing contextual menus).
swipeleft
Executed when the user swipes a finger from right to left.
swiperight
Executed when the user swipes a finger from left to right.
$(document).bind("mobileinit", function() {
$("#page2").live("swiperight", goBackToPage1);
});
function goBackToPage1() {
$.mobile.changePage("#page1", { reverse: true });
$("#page2").unbind("swiperight", goBackToPage1);
}
Virtual Click Events
Most mobile touch web browsers have a delay of 300– 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.