jQuery Mobile Event

events = all the different actions that the web page can respond to from visitors.

jQuery Mobile Event

You can use any standard jQuery events.

In addition, jQuery Mobile also provides several events customized for mobile browsing:

  • Touch events - Triggered when the user touches the screen (tap and swipe)
  • Scroll events - Triggered when scrolling up and down
  • Orientation events - Triggered when the device is rotated vertically or horizontally
  • Page events - Triggered when a page is displayed, hidden, created, loaded, and/or unloaded

For complete information about all jQuery Mobile events, please visit our jQuery Mobile Event Reference Manual.

Initialize jQuery Mobile events

In jQuery, you have learned to use the document ready event to prevent jQuery code from running before the document is fully loaded (is ready):

jQuery document ready event

<script>
$(document).ready(function(){
   // This is the jQuery event...
});
</script>

Try It Yourself

However, in jQuery Mobile, we use the pageinit event, which occurs after the page has been initialized and the styles have been set.

The second parameter points to ("#pageone") which points to the id of the page to specify the events for:

jQuery Mobile pageinit event

<script>
$(document).on("pageinit","#pageone",function(){
   // This is the jQuery event...
});
</script>

Try It Yourself

Note:The jQuery on() method is used to add event handlers.

The next few chapters will detail each jQuery Mobile event.