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 ...
随机推荐
- 手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...
- C#实现单实例运行
C#实现单实例运行的方法,也有多种,比如利用 Process 查找进程的方式,利用 API findwindow 查找窗体的方式,还有就是 利用 Mutex 原子操作,上面几种方法中, 综合考虑利用 ...
- php中的字符串常用函数(二) substr() 截取字符串
//substr($str, startIndex, length) //截取方向都是从左向右的. //length不写默认截取到最后一个. //length为正是个数(包括开头的个数),为负是索引( ...
- 如鹏网学习笔记（十三）EasyUI
一.EasyUI简介 是一组基于JQuery的UI插件集合 主要作用:为JQuery对象提供新的方法,实现新的功能 可以快速创建出简洁.友好.美观的页面,非常适合做网站后台管理页面(不够漂亮,不适合做 ...
- Delegate背后的秘密
表面上看来使用delegate是一件很简单的事. 用delegate关键字定义,使用老套的new创建一个instance ,使用熟悉的方法调用写法调用,只不过不在是方法名,而是委托名. 但是在这背后C ...
- CentOS-Linux系统下安装JDK
一般情况下,Linux系统都有自带的JDK,但不符合开发要求,所以需要卸载,重新安装JDK 步骤1:查看现有安装的JDK版本 命令: rpm -qa | grep -i java 步骤2:卸载已有软件 ...
- MySQL B+树索引和哈希索引的区别（转 JD二面）
导读 在MySQL里常用的索引数据结构有B+树索引和哈希索引两种,我们来看下这两种索引数据结构的区别及其不同的应用建议. 二者区别 备注:先说下,在MySQL文档里,实际上是把B+树索引写成了BTRE ...
- js delete 操作符
delete操作符很陌生,很少会用到,但是既然碰到了,就mark一下: delete 操作符用于删除一个对象的属性: 注意点:只能删除自己的属性,从原型链上继承的属性是无法删除的:
- Postman如何调试
在用Postman接口测试过程当中,肯定少不了调试,下面记录一下Postman如何通过控制台输出进行调试: 一.打开控制台(View-Show Postman Console) 二.预置测试数据(测试 ...
- Leetcode算法比赛----First Unique Character in a String
问题描述 Given a string, find the first non-repeating character in it and return it's index. If it doesn ...