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>&nbsp;</h4>
        </div>
    </div>
</body>
</html>