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>