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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-17 21:21:08

jQuery-mobile 学习笔记之三(事件监听)的相关文章

JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>句柄添加监听事件</title> <script type="text/javascript" src="tzy.js"></script> </head> <body>

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

Jquery Mobile 学习笔记(一)

1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role:page 代表一个页面 data-position:fixed 代表固定工具栏 data-transition:slide 跳转动画效果 data-rel:dialog 弹窗口 button:A <button>  B <input type="button" />  C <a class=&qu

jQuery mobile 学习02 页面事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

jquery mobile学习笔记一

先看下面几个属性 ui-body ui-bar ui-corner-all ui-body-[a-z] custom-corners ui-bar创建一个通栏的块,可以作为内容块的区分,通过ui-bar-[a-z]用户可以修改皮肤. ui-body的用法跟ui-bar的用法一样 ui-corner-all给块添加圆角属性 custom-corners内部的元素,也继承父级元素的圆角属性. 2.按钮部分 默认情况 <input type="button" value="b

js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件 第二:IE中监听函数 var oDiv; function fnClick(){ alert("click

html学习 - jquery事件监听详解

html学习 - jquery事件监听详解 html学习 - jquery事件监听详解 监听方法 监听方法参数解释 click参数 事件自动执行问题解决 bind方法 live方法 监听方法 在jquery里,监听的方法比较多,用的最多的就是简单的.click() .onchange() .pressdown() 所以这样很简单啊,直接使用就好了,只要符合参数规范就可以了.除了这个还有bind() live() 方法. 而addEventListener()同bind()方法是没有很大功能上的区

JAVA学习笔记(四十七)- 事件监听

定义ActionListener接口的实现类实现事件监听 import java.awt.Button; import java.awt.Frame; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; /* * 事件监听 */ public class Te

从jQuery的缓存到事件监听

很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250="1">abc </DIV> 首先jQuery1294122065250中的"1294122065250"其实是一个时间戳.看看jQuery的源代码. var expando 

Android学习按键事件监听与Command模式

Android学习按键事件监听与Command模式 - Dufresne - 博客园 ? 一 Command模式 意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化: 对请求排队或记录请求日志,以及支持可撤销的操作. 将请求被封装成一个对象,当向某对象提交请求时,使我们可以不用去知道被具体的请求的操作或者请求的接收者, 实现了动作的请求者对象和动作的执行者对象之间的解耦合. 适用性: 使用Command模式代替callback形式的回调应用: 在不同的时刻指定.排列和执行请