PhoneGap API 之事件处理
一、 deviceready 事件
1、在使用 PhoneGap 开发应用时，deviceready 事件是非常常用的。这一事件在设备的本地 环境和页面完全加载完成之后才触发
2、注意：此事件一般晚于 jquery 的 ready 事件，jquery 的 ready 事件是在 DOM 完全加载 完成后触发，deviceready 则是设备的本地环境和页面完全加载完成之后才触发
3、PhoneGap 包含两个基础，native 和 JavaScript，当 native 加载的时候，自定义的一些图片 会被调用，
而 JavaScript 需要在 DOM 加载后就会被加载。这是可能造成 JavaScript 在图片加 载前就已经被调用了。
使用 deviceready事件可以很好的解决这类问题，他可以保证PhoneGap是在完全加载完成后，才会被触发。
二、 pause 事件
当 PhoneGap 应用被置为后台时触发
三、 resume 事件
当 PhoneGap 应用重新从后台置为前台时触发
四、 online 事件
当 PhoneGap 应用连接因特网时触发
五、 offline 事件
当 PhoneGap 应用断开因特网时触发
六、 backbutton 事件
当单击退回按钮时触发
七、 menubutton 事件
当单击菜单按钮时触发
八、 batterycritical 事件
当 PhoneGap 应用监控到电池达到警告时触发（20%） batterycritical 的处理程序将会调用一个对象。
该对象包含以下两个属性：
level：电池剩余电量的百分比，取值范围是 0-100。(数字类型)
isPlugged：boolean 型的值，表示设备是否接通电源。
九、 batterylow 事件
在电量非常低的情况下触发（5%） batterylow 的处理程序将会调用一个对象。
该对象包含以下两个属性：
level：电池剩余电量的百分比，取值范围是 0-100。(数字类型)
isPlugged：boolean 型的值，表示设备是否接通电源。
十、 batterystatus 事件
PhoneGap 应用监控到电池状态有改变时触发（每当电量变化 1%的时候触发一次）
batterystatus 的处理程序将会调用一个对象，该对象包含以下两个属性：
level：电池剩余电量的百分比，取值范围是 0-100。(数字类型)
isPlugged：boolean 型的值，表示设备是否接通电源。
十一、主要代码的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//注册设备和页面加载完成的监听事件deviceready，当设备加载完成后执行myDeviceready这个函数
//第一个参数是监听的事件，第二个参数是回调函数，当触发这个事件时执行的函数，第三个参数是false
document.addEventListener('deviceready',myDeviceready,false);
}) function myDeviceready(){
//alert('设备加载完成');
console.log('设备加载完成');//在eclipse控制台中打印
$("#deviceStatus .ui-btn-text").text("设备加载完成");//更改html中的文字 //当设备加载完后，注册其他事件
document.addEventListener('pause',myPause,false);
document.addEventListener('resume',myResume,false); document.addEventListener('online',myOnline,false);
document.addEventListener('offline',myOffline,false); document.addEventListener('backbutton',myBackbutton,false);
document.addEventListener('menubutton',myMenubutton,false); //batterystatus 该事件是用window监听的
window.addEventListener('batterystatus',myBatterystatusListener,false); window.addEventListener('batterycritical',myBatterycritical,false); window.addEventListener('batterylow',myBatterylow,false); }
//应用被置为后台以后执行的函数
function myPause(){
console.log('应用被置为后台');
$('#deviceCurrentStatus .ui-btn-text').text('应用被置为后台'); }
//应用被置为前台
function myResume(){
console.log('应用被置为前台');
$('#deviceCurrentStatus .ui-btn-text').text('应用被置为前台');
} //连接网络的时候执行的事件
function myOnline(){
console.log('连接网络的时候执行的事件');
$('#deviceConectionStatus .ui-btn-text').text('连接网络的时候执行的事件');
}
//断开网络执行的事件
function myOffline(){
console.log('断开网络执行的事件');
$('#deviceConectionStatus .ui-btn-text').text('断开网络执行的事件');
} var backcount=0;
var menucount=0;
//点击返回按钮的事件
function myBackbutton(){
console.log('返回按钮被点击了');
backcount++;
$('#backButtonTouch .ui-btn-text').text('返回按钮被点击了'+backcount+'次');
}
//菜单按钮
function myMenubutton(){
console.log('菜单按钮被点击了');
menucount++;
$('#menuButtonTouch .ui-btn-text').text('菜单按钮被点击了'+menucount+'次');
} //电量状态
function myBatterystatusListener(info){
console.log("电量值" + info.level);
$("#batterystatus .ui-btn-text").text("电量值" + info.level+info.isPlugged);
}
//电量低于20%的时候触发
function myBatterycritical(info){
console.log("电量低于20%的时候触发" + info.level);
}
//电量低于5%的时候触发
function myBatterylow(info){
console.log("电量低于5%的时候触发" + info.level);
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap实战</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" id="deviceStatus">设备加载中....</a>
<a href="#" data-role="button" id="deviceCurrentStatus">应用为前台</a>
<a href="#" data-role="button" id="deviceConectionStatus">连接加载中....</a>
<a href="#" data-role="button" id="backButtonTouch">返回按钮被按0次</a>
<a href="#" data-role="button" id="menuButtonTouch">菜单按钮被按0次</a>
<a href="#" data-role="button" id="batterystatus">电量获取中...</a>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div>
</body>
</html>
PhoneGap API 之事件处理的更多相关文章
- PhoneGap API 之事件处理_双击返回键退出程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- PhoneGap学习地址 / PhoneGap API介绍：Events
http://blog.csdn.net/phonegapcn 事件类型: backbutton deviceready menubutton pause resume searchbutton on ...
- PhoneGap API介绍：Events
事件类型: backbutton deviceready menubutton pause resume searchbutton online offline backbutton 当用户在Andr ...
- PhoneGap API 之多媒体
一. MediaApi 简单介绍 PhoneGap API Media 对象提供录制和回放设备上的音频文件的能力 参数: var media = new Media(src, mediaSuccess ...
- PhoneGap API介绍：Camera
本文将介绍PhoneGap API——Camera:使用设备的摄像头采集照片,对象提供对设备默认摄像头应用程序的访问. 方法: camera.getPicture 参数: cameraSuccess ...
- PhoneGap API介绍：File
本文将介绍PhoneGap API——File:通过JavaScript截获本地文件系统.File是用于读取.写入和浏览文件系统层次结构的PhoneGap API. 对象: DirectoryEntr ...
- React 组件的生命周期API和事件处理
一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultP ...
- PhoneGap API Documentation API Reference
API Reference-API参考 Accelerometer-加速度计 Tap into the device's motion sensor.-点击进入该设备的运动传感器. Camera-相机 ...
- 禁止输入中文 与 禁止输入数字在phonegap api环境效果
例子如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
随机推荐
- ListView和BaseAdapter
参考资料:http://www.runoob.com/w3cnote/android-tutorial-listview.html <LinearLayout xmlns:android=&qu ...
- iOS开源项目周报0209
由OpenDigg 出品的iOS开源项目周报第七期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.Hedwig 向 ...
- H5+MUI上传文件
应用场景:MUI+H5+WEBAPI 今天在给我外甥女调手机端上传图片的时候,发现他是直接调用的MUI下的api,直接调取相册或者相机,到最后只看见了一个文件的路径,所以以前写的上传文件就不太好套上去 ...
- 搭建Web部署环境
这里使用Web轻量级的服务器Tomcat Tomcat常用作servlet的运行容器,在JavaWeb开发中广泛使用,当然,Tomcat也可为提供HTML页面服务. 主要步骤: Tomcat下载安装 ...
- Linux NTP时间服务器
NTP 时间服务器 ntp也是一种协议 ntp软件(支持ntp协议) CentOS6自带 CentOS7需要安装 chrony软件(支持ntp协议) CentOS7自带 安装ntp CentOS ...
- 题解 P1068 【分数线划定】
由于涉及到排序和对应序号 那就定义一个结构体 结合STL模板中的sort日常沉迷sort 提示:虽然我也是蒟弱 sort是快速排序函数,有两个或三个参数, 两个参数适用于平常的数字类型,即形sort( ...
- winform程序限制只能打开一个进程
有很多方案,先来最傻瓜式的 : static class Program { /// <summary> /// 应用程序的主入口点. ...
- Core.Java.Volume.I.Fundamentals.10th.Edition 14.5.8 Volatile域 中文版 章节勘误
今天重扫了corejava 14 并发的一章,在谈到volatile域代替synchronized 应用于并发更新时,看到如下内容,并发更新可用内部锁的方式但会带来阻塞问题,可用volatile域替代 ...
- js 防止连续点击
简称 js防连点 var flag = true; $(".yzm>span").click(function(){ if(!flag){ return fals ...
- 洛谷P3384 树链剖分
如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式: 2 x ...