jQuery-mobile 学习笔记之三（事件监听）

素颜马尾好姑娘i 2022-08-02 14:43 202阅读 0赞

续上

触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）  
滚动事件 - 当上下滚动时触发  
方向事件 - 当设备垂直或水平旋转时触发  
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发

## 一、初始化事件 ##

### 1. ready 事件 页面加载完成 ###

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

### 2. 页面加载完成事件二 pageinit ###

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

### 3.事件格式 ###

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

## 二、触摸事件 ##

tap          事件在用户敲击某个元素时触发  
taphold      事件在用户敲击某个元素并保持一秒时被触发  
swipe        事件在用户在某个元素上水平滑动超过 30px 时被触发  
swipeleft    事件在用户在某个元素上从左滑动超过 30px 时被触发  
swiperight   事件在用户在某个元素上从右滑动超过 30px 时被触发

## 三、滚动事件 ##

scrollstart 事件在用户开始滚动页面时被触发  
     （iOS 设备会在滚动事件发生时冻结 DOM 操作）  
scrollstop 事件在用户停止滚动页面时被触发

## 四、方向（横竖屏转动） ##

orientationchange 事件在用户垂直或水平旋转移动设备时被触发  
可以通过window.orientation 来检测横屏竖屏

$(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%"});
      }
    });

## 五、页面事件 ##

Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后  
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时  
Page Transition - 在页面过渡之前和之后  
Page Change - 当页面被更改，或遭遇失败时

### 【初始化事件】 ###

pagebeforecreate当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。  
pagecreate当页面已创建，但增强完成之前，触发该事件。  
pageinit当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。

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

### 【加载事件】 ###

pagebeforeload在任何页面加载请求作出之前触发。  
pageload在页面已成功加载并插入 DOM 后触发。  
pageloadfailed如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。

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

### 【过渡事件】 ###

pagebeforeshow在“去的”页面触发，在过渡动画开始前。  
pageshow在“去的”页面触发，在过渡动画完成后。  
pagebeforehide在“来的”页面触发，在过渡动画开始前。  
pagehide在“来的”页面触发，在过渡动画完成后。

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