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 ...
随机推荐
- Shell脚本编写1
1.shell操作系统与外部最主要的接口就叫做shell.shell是操作系统最外面的一层.shell管理你与操作系统之间的交互:等待你输入,向操作系统解释你的输入,并且处理各种各样的操作系统的输出结 ...
- [转]Creating an OData v3 Endpoint with Web API 2
本文转自:https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/odata- ...
- LINQ-Group子句、Into子句及orderby子句
1. Group子句 LINQ表达式必须以from子句开头,以select或Group子句结束,所以除了使用select子句也可以使用Group子句来返回元素分组后的结果.Group子句用来查询结果分 ...
- Redis---1、介绍
Redis简介: 是以key-value形式存储,和传统的关系型数据库不一样,不一定遵循传统数据库的一些基本要求. 优点: 对数据高并发读写 对海量数据的高效率存储和访问 对数据的可扩展性和高可用行 ...
- 第9天：原型、继承、函数使用推荐以及this的指向
原型 javascript原型指向改变如何添加方法和访问 <!DOCTYPE html> <html lang="en"> <head> < ...
- 2019-1-19 object祖宗类的equals重写
package com.test; /** * object祖宗类的equals重写 * @author Mr.kemi *2019-1-19 */ public class Equals { pri ...
- GString惰性求值
当对一个GString实例求值时,如果其中包含一个变量,该变量的值会被简单地打印到一个Writer,通常是一个StringWriter.然而,如果GString中包含的是一个闭包,而非变量,该闭包就会 ...
- groovy实现循环、交换变量、多赋值、？.运算符
/** * Created by Jxy on 2019/1/3 10:01 * 1.实现循环的方式 * 2.安全导航操作符---?. * 3.一次性赋值给多个变量 */ 0.upto(2){ pri ...
- 转：zip 和 unzip 的参数说明
收集的资料: 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip -r yasuo.zip abc.txt dir1 2.我下载了一个yasuo.zip文件, ...
- MVC 导出Execl 的总结几种方式 （一）
在ASP.NET 中导出Execl 表格有很多方式,有利有弊,就是看自己怎么使用了:下面就是自己总结了几种导出Execl 方式的,仅供参考. 导出Execl 的原理都是一样的,其实都是将数据整合成ta ...