Detailed explanation of jQuery-mobile event monitoring and usage

The examples in this article describe jQuery-mobile event monitoring and usage. Share it with everyone for your reference, the details are as follows:

Touch event - triggered when the user touches the screen (tap and slide)
Scroll event - triggered when scrolling up and down
Direction event - when the device
Page events triggered when vertical or horizontal rotation - Triggered when the page is displayed, hidden, created, loaded and/or unloaded

1. Initialization event

1. ready event page loading Complete

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

2. Page loading completion event two pageinit

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

3. Event format

$(元素).on('事件',funciton(){
  //code here...
})

2. Touch event

tap The event is triggered when the user taps an element
taphold The event is triggered when the user taps an element and holds it for one second
swipe The event is triggered when the user taps an element The event is triggered when the user slides more than 30px from the left on an element.
swipeleft The event is triggered when the user slides more than 30px from the left on an element.
swiperight The event is triggered when the user slides more than 30px from the right on an element. Trigger

3. Scroll event

scrollstart event is triggered when the user starts to scroll the page
(iOS devices will freeze the DOM operation when the scroll event occurs)
scrollstop event is triggered when the user It is triggered when the scrolling page is stopped

4. Orientation (horizontal and vertical screen rotation)

The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally

Can be passed through window.orientation To detect horizontal and vertical 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 page initialization
Page Load/Unload - when an external page loads, unloads, or encounters a failure
Page Transition - before and after a page transition
Page Change - when a page is changed, or When encountering failure

[Initialization event]

pagebeforecreate This event is triggered when the page is about to be initialized and before jQuery Mobile has started enhancing the page.
pagecreate This event is triggered when the page has been created but before the enhancement is completed.
pageinit This event is fired when the page has been initialized and after jQuery Mobile has completed page enhancements.

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

[Loading event]

pagebeforeload is triggered before any page loading request is made.
pageload Fires after the page has been successfully loaded and inserted into the DOM.
pageloadfailed This event is triggered if the page loading request fails. By default, the "Error Loading Page" message will be 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 "to" page, after the transition animation is completed.
pagebeforehide is triggered on the "coming" page, before the transition animation starts.
pagehide is triggered on the "coming" page, after the transition animation is completed.

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

For more jQuery-mobile event monitoring and usage details, please pay attention to the PHP Chinese website!

##