JQuery-mobile event monitoring and Usage Details

This article mainly introduces jQuery-mobile event listening and usage, and analyzes various common event types and usage tips of jQuery-mobile based on examples, for more information about jQuery-mobile event listening and usage, see the following example. We will share this with you for your reference. The details are as follows:

Touch event-triggered when the user touches the screen (hitting and sliding)
Rolling event-triggered when Scrolling up or down
Direction event-triggered when the device rotates vertically or horizontally
Page events-triggered when the page is displayed, hidden, created, loaded, and/or uninstalled

I. Initialization events

1. ready event page loaded

$(document).ready(function(){  //your code here...});

2. Page Loading completed event 2 pageinit

$(document).on('pageinit','#pageone',function(){  //your code here...});

3. Event format

$ (Element). on ('event', funciton () {// code here ...})

2. Touch events

Triggered when a user clicks an element.
The taphold event is triggered when the user clicks an element and keeps it for one second.
The swipe event is triggered when the user horizontally slides over 30px on an element.
The swipeleft event is triggered when the user slides more than 30px from the left of an element.
The swiperight event is triggered when the user slides more than 30px from the right of an element.

Iii. Rolling events

The scrollstart event is triggered when the user starts to scroll the page.
(IOS devices will freeze DOM operations when a rolling event occurs)
The scrollstop event is triggered when the user stops scrolling the page.

Iv. Orientation (horizontal and vertical screen rotation)

Orientationchange is triggered when the user rotates the mobile device vertically or horizontally.

You can use window. orientation to check the landscape and portrait screens.

$(window).on("orientationchange",function(){ if(window.orientation == 0) // Portrait {  $("p").css({"background-color":"yellow","font-size":"300%"}); } else // Landscape {  $("p").css({"background-color":"pink","font-size":"200%"}); }});

5. Page events

Page Initialization-before the Page is created, when the Page is created, and after the Page is initialized
Page Load/Unload-when an external Page is loaded, uninstalled, or failed
Page Transition-before and after Page Transition
Page Change-when the Page is changed or fails

[Initialization event]

Pagebeforecreate: this event is triggered when the page is about to be initialized and before jQuery Mobile starts to enhance the page.
Pagecreate this event is triggered when the page has been created but before the enhancement is complete.
Pageinit: this event is triggered when the page has been initialized and the page has been enhanced by jQuery Mobile.

$(document).on("pagebeforecreate",function(event){})

[Load events]

Pagebeforeload is triggered before any page loading request is made.
Pageload is triggered after the page is successfully loaded and the DOM is inserted.
Pageloadfailed: this event is triggered if the page loading request fails. By default, the message "Error Loading Page" is displayed.

$(document).on("pageload",function(event,data){})

[Transition event]

Pagebeforeshow is triggered on the "go" page before the transition animation starts.
Pageshow is triggered on the "go" page after the transition animation is completed.
Pagebeforehide is triggered on the "Lai" page before the transition animation starts.
Pagehide is triggered on the "Lai" page after the transition animation is completed.

$(document).on("pagebeforeshow","#pagetwo",function(){ })

For more jQuery-mobile event listening and Usage Details, please follow the PHP Chinese network!