jQuery-mobile事件监听与用法详解


Posted in Javascript onNovember 23, 2016

本文实例讲述了jQuery-mobile事件监听与用法。分享给大家供大家参考,具体如下:

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

一、初始化事件

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(){ })

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
理解javascript闭包
Dec 15 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Angular 数据请求的实现方法
May 07 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
jquery-mobile表单的创建方法详解
Nov 23 #Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 #Javascript
浅析Node.js:DNS模块的使用
Nov 23 #Javascript
jquery-mobile基础属性与用法详解
Nov 23 #Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 #Javascript
利用jquery获取select下拉框的值
Nov 23 #Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 #Javascript
You might like
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php实现上传图片文件代码
2015/07/19 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
如何利用Python识别图片中的文字
2020/05/31 Python
python里反向传播算法详解
2020/11/22 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
高中地理教学反思
2014/01/29 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
抗震救灾标语
2014/06/26 职场文书
实习证明格式范文
2015/06/16 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书