Description
Many standardized events of jQuery can be used in jQuery Mobile. Along with these jQuery Events, jQuery Mobile also offers several events that are mainly made for the purpose of mobile browsing. Few of jQuery Mobile Events are:
- Scroll events - The scroll events gets triggered if a user scrolls the screen up and down
- Page events - The page events gets triggered if a page is made to show, hide, create, load and/or unload
- Touch events - The touch events gets triggered if a user touch the screen (tap and swipe).
- Orientation events - The orientation events gets triggered if a device rotates horizontally or vertically.
Description
Normally, in jQuery, the event document.ready() is used to avoid the code from running before the document is loading finished.
[html]
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//jQuery ready function
$(document).ready(function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
[/html]
Output:
But in jQuery Mobile, the event 
pagecreate is used to make the page create in the DOM, but before enhancement is completed.
The "#pageone" points to the page id to specify the events for jQuery Mobile pagecreate event.
Description
The event orientationchange triggers when mobile device is rotated vertically or horizontally. Attach the orientationchange event to the window object to use it as shown below.
[html]
$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});
[/html]
The function callback has single argument, the object event that gives back mobile device orientation: "portrait" (the device is held in a vertical position) or "landscape" (the device is held in a horizontal position).
[html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate",function(event){
$(window).on("orientationchange",function(event){
alert("Orientation changed to: " + event.orientation);
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>The orientationchange Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>Try to rotate your device!</p>
<p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
[/html]
Output:
Other events like scroll, touch and page events are discussed in upcoming chapters.
Key Points
- Mobile Browsing becomes easier with jQuery Mobile Events.
- jQuery Mobile "pagecreate" enhances the jQuery Mobile page.