Latest web development tutorials
 

jQuery Mobile Events


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.