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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
理解javascript回调函数
2014/12/28 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
软件测试英文面试题
2012/10/14 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
道德大讲堂实施方案
2014/05/14 职场文书
转正申请报告格式
2015/05/15 职场文书
力克胡哲观后感
2015/06/10 职场文书
初中团支书竞选稿
2015/11/21 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript