jQuery-mobile 学习笔记之三(事件监听)
2015-07-23 23:53
645 查看
续上
触摸事件 - 当用户触摸屏幕时触发(敲击和滑动)
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
taphold 事件在用户敲击某个元素并保持一秒时被触发
swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发
swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发
swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发
(iOS 设备会在滚动事件发生时冻结 DOM 操作)
scrollstop 事件在用户停止滚动页面时被触发
可以通过window.orientation 来检测横屏竖屏
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改,或遭遇失败时
pagecreate 当页面已创建,但增强完成之前,触发该事件。
pageinit 当页面已初始化,并且在 jQuery Mobile 已完成页面增强之后,触发该事件。
pageload 在页面已成功加载并插入 DOM 后触发。
pageloadfailed 如果页面加载请求失败,则触发该事件。默认地,将显示 "Error Loading Page" 消息。
pageshow 在“去的”页面触发,在过渡动画完成后。
pagebeforehide 在“来的”页面触发,在过渡动画开始前。
pagehide 在“来的”页面触发,在过渡动画完成后。
触摸事件 - 当用户触摸屏幕时触发(敲击和滑动)
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
一、初始化事件
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-mobile 学习笔记之二(表单创建)
- jquery-mobile 学习笔记之一(基础属性)
- jQuery知识点总结(第六天)
- SpringMVC+JQueryMobile开发 data-external-page与JQM机制
- jQuery之选择器
- 如何用jquery写一个简单的返回顶部
- Jquery例子: 复制表一的某一列的内容到表二某列的输入框
- jQuery源码框架思路
- jquery 的ajax的同、异步问题
- jquery ajax CORS 跨域访问 WebService
- jQuery 源码分析4: jQuery.extend
- 非常简单的使用jquery fancybox插件实现的查看图片效果
- Jquery Validate插件+requireJs库
- flask接受jquery ajax传递过来的参数
- 关于在jquery动态修改css,html中,mouseenter,mouseleave,click等方法失效的处理
- jquery validationengine验证
- jQuery静态方法parseJSON方法使用和源码分析
- jQuery报错:
- jQuery基本方法随笔
- jquery日期格式化