Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding jQuery Mobile Events

  Author : Shailendra Chauhan
Updated On : 26 Sep 2016
Total Views : 6,209   
 

jQuery mobile is made on the top of jQuery Library and jQuery offers various events for handling user interaction. In addition, jQuery Mobile also offers various native events that are especially made for mobile devices. The jQuery mobile events can be categorized into four categories as given below:

  1. Touch Events

    These events triggers when you touch the screen. These events also work with your PC when you do tap and swipe with your mouse. Touch events example are: tap, taphold, swipe, swipeleft and swiperight.

    <!DOCTYPE html>
    <html>
    <head>
     <title>jQuery Mobile</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
     <script>
     $(document).ready(function () {
     $("p").on("tap", function () {
     alert("Tap event detected!");
     });
    
     $("p").on("taphold", function () {
     alert("Tap hold event detected!");
     });
    
     $("p").on("swipe", function () {
     alert("Swipe event detected!");
     });
    
     $("p").on("swipeleft", function () {
     alert("Swipe left event detected!");
     });
    
     $("p").on("swiperight", function () {
     alert("Swipe right event detected!");
     });
     });
     </script>
    </head>
    <body>
     <div data-role="page">
     <div data-role="header">
     <div align="center">jQuery Mobile Events</div>
     </div>
     <div data-role="content">
     <p>Introduction to jQuery Mobile Events!</p>
     </div>
     </div>
    </body>
    </html>
    
  2. Scroll Events

    These events triggers when you scroll up and down the screen. Scroll events examples are: scrollstart and scrollstop.

    <!DOCTYPE html>
    <html>
    <head>
     <title>jQuery Mobile</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
     <script>
     $(document).ready(function () {
     $("p").on("scrollstart", function () {
     alert("Scrolling start event detected!");
     });
    
     $("p").on("scrollstop", function () {
     alert("Scrolling stop event detected!");
     });
     });
     </script>
    </head>
    <body>
     <div data-role="page">
     <div data-role="header">
     <div align="center">jQuery Mobile Events</div>
     </div>
     <div data-role="content">
     <p>
     Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     <br /><br />Introduction to jQuery Mobile Events!
     </p>
     </div>
     </div>
    </body>
    </html>
    
  3. Page Events

    These events triggers when a page is loaded or unloaded, shown or hidden and created. Page events examples are: pagecreate, pageinit, pageload, pageshow, pagehide.

    <!DOCTYPE html>
    <html>
    <head>
     <title>jQuery Mobile</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
     <script>
     $(document).on("pagecreate", function (event) {
     alert("Page create event detected!");
     });
     $(document).on("pageinit", function (event) {
     alert("Page init event detected!")
     });
    
     $(document).on("pageshow", "#page2", function () { //When entering nextpage
     alert("page2 is now shown!");
     });
    
     $(document).on("pagehide", "#page2", function () {// When leaving nextpage
     alert("page2 is now hidden!");
     });
     </script>
    </head>
    <body>
     <div data-role="page" id="page1">
     <div data-role="header">
     <div align="center">jQuery Mobile Events</div>
     </div>
     <div data-role="content">
     <h1>Page1</h1>
     <p>
     Introduction to jQuery Mobile Events!
     </p>
     <a href="#page2">Go to Next Page</a>
     </div>
     </div>
    
     <div data-role="page" id="page2">
     <div data-role="header">
     <div align="center">jQuery Mobile Events</div>
     </div>
     <div data-role="content">
     <h1>Page2</h1>
     <p>
     Introduction to jQuery Mobile Events!
     </p>
     <a href="#page1">Go to Previous Page</a>
     </div>
     </div>
    </body>
    </html>
    
  4. Orientation Events

    These events triggers when you rotates mobile device vertically or horizontally i.e. change your mobile device orientation. Orientation events examples are: orientationchange.

    <!DOCTYPE html>
    <html>
    <head>
     <title>jQuery Mobile</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
     <script>
     $(document).ready(function () {
     $(window).on("orientationchange", function (event) {
     alert("Orientation is: " + event.orientation);
     });
     });
     </script>
    </head>
    <body>
     <div data-role="page">
     <div data-role="header">
     <div align="center">jQuery Mobile Events</div>
     </div>
     <div data-role="content">
     <span></span>
     <p>
     Introduction to jQuery Mobile Events!
     </p>
     </div>
     </div>
    </body>
    </html>
    
What do you think?

I hope you have enjoyed the article and would able to have a clear picture about jQuery Mobile events. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
14 DEC
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM- 09:00 AM IST

Know More
5 DEC
AngularJS Development (online)

Mon - Fri     6:30 AM-7:30 AM IST

3 DEC
AngularJS Development (offline)

SAT,SUN     11:00 AM-12:30 PM IST

3 DEC
MEAN Stack Development (offline)

Sat, Sun     (09:30 AM-11:00 AM IST)

26 NOV
ASP.NET MVC with AngularJS Development (offline)

(SAT,SUN)     03:30 PM-05:00 PM IST

24 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     09:30 PM-11:00 PM IST

12 NOV
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

3 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     07:30 AM-09:00 AM IST

25 OCT
.NET Development (offline)

Mon-Fri     9:00 AM-11:00 AM IST

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+