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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
JS之小练习代码
Oct 12 Javascript
JsDom 编程小结
Aug 09 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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
php数据库连接
2006/10/09 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
JS Timing
2007/04/21 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
Node.js简单入门前传
2017/08/21 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python实现自主查询实时天气
2018/06/22 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
钳工实习自我鉴定
2013/09/19 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
文明寄语大全
2014/04/11 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
员工手册编写范本
2015/05/14 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
Go语言安装并操作redis的go-redis库
2022/04/14 Golang