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 ...
随机推荐
- Docker学习（四）: 操作容器
特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! =============系列文章============= 1 ...
- 四、curator recipes之共享重入互斥锁
简介 curator的recipes实现了可重入互斥锁,允许你在分布式场景下多个进程之间实现锁的互斥以协调多进程执行. 相关类:InterProcessMutex 官方文档:http://curato ...
- spring boot2 使用log4j2
spring boot默认使用的是logback,看到好多地方说logback比log4j耗性能,具体么我也没试过,不过个人还是log4j用得更多. 先看pom依赖 <dependency> ...
- linux centOs中安装好数据库，客户端用plsql连接oracle
原创作品,转载请在文章显眼位置注明出处:https://www.cnblogs.com/sunshine5683/p/10030375.html 首先,回顾上篇 CenOs7安装oracle图文详细过 ...
- RDCMan之DPI 和 Screen Resolution设置
Customer要求在以下环境验证几个bug DPI setting Minimum resolution 96 / 100% 1024x768 120 /125% 1280x960 144 / ...
- Visual studio 2013打开报异常"Exception has been thrown by the target of an invocation"
最近遇到一个问题,打开VS2013和SQL Server2014都会出报错,错误信息如下: 以前都是好好的,重启了机子也不行,能打开两个VS,再打开第三个VS还是会报错,百度无果,还是在google上 ...
- python中参数传递的方法
Python中函数传递参数的形式主要有以下五种,分别为位置传递,关键字传递,默认值传递,不定参数传递(包裹传递)和解包裹传递. 1.位置传递实例: def fun(a,b,c) return a+b+ ...
- select实现三级联动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用WampServer搭建本地PHP环境，绑定域名，配置伪静态
倡萌之前介绍过 USBWebserver 快速搭建本地PHP环境 ,推荐USBWebserver的原因在于它是绿色的,不需要安装,想使用就手动运行下即可.但是 USBWebserver 也有自身的弱点 ...
- 让你跟上nodejs的资源
For a long time, JavaScript developers hoped for a server-side solution that would allow them to ful ...