Events = All the different visitor's actions that a web page can respond to.
jQuery Mobile Events
You can use any standard jQuery events in jQuery Mobile.
In addition, jQuery Mobile also offers several events that are tailor-made for mobile-browsing:
- Touch events - triggers when a user touches the screen (tap and swipe)
- Scroll events - triggers when a user scrolls up and down
- Orientation events - triggers when the device rotates vertically or horizontally
- Page events - triggers when a page is shown, hidden, created, loaded and/or unloaded
For a complete reference of all the jQuery Mobile events, please go to our jQuery Mobile Events Reference.
Initializing jQuery Mobile Events
In jQuery, you have learned to use the document ready event to prevent any jQuery code from running before the document is finished loading (is ready):
jQuery document ready event
<script>
$(document).ready(function(){
// jQuery methods go here...
});
</script>
Try it Yourself »However, in jQuery Mobile, we use the pagecreate event, which occurs when the page has been been created in the DOM, but before enhancement is complete.
The second parameter ("#pageone") points to the id of the page to specify the event(s) for:
jQuery Mobile pagecreate event
<script>
$(document).on("pagecreate","#pageone",function(){
// jQuery
events go here...
});
</script>
Try it Yourself »Note: The jQuery on() method is used to attach event handlers.
The next chapters will explain some of the most popular events in jQuery Mobile.