Phonegap 事件机制

PhoneGap事件包含另个部分，一个是传统网页触发的事件，比如DOM加载，超链接，form表单提交事件等。

另一个是PhoneGap独有的事件。如

deviceready：只在设备在本地环境和页面完全加载后触发。

backbutton： 重载系统的Back按纽

pasue： pasue事件

resume ： resume事件

searchbutton： 当用户在Android系统上点击"搜索”时触发。

online：连接的网络时触发

offline： 没有网络时触发

menubutton ：重新定义菜单行为

batterycritical ： 电量达到临界值时触发

batterlow： 电量非常低时触发

Demo如下

1.首先创建PhoneGap Project

2.引入JQuery Mobile

3. 编辑HTML和JS代码

<! DOCTYPE  html>   < html >   < head >      < meta  charset="utf-8" />      < meta  name="format-detection" content="telephone=no" />      < meta  name="msapplication-tap-highlight" content="no" />      < meta  name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />      <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->      < meta  http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />      <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->        < link  rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">      < script  type="text/javascript" src="js/jquery.js"></ script >      < script   type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></ script >      < title >Hello World</ title >      < script  type="text/javascript" charset="utf-8">            var count = 0;          document.addEventListener('deviceready', onDeviceReady, false);            function onDeviceReady(){              document.addEventListener("backbutton", onBackButton, false);              document.addEventListener("pause", onPause, false);              document.addEventListener("resume", onResume, false);              document.addEventListener("online", isOnline, false);              document.addEventListener("offline", isOffline, false);              document.addEventListener("menubutton", onMenuButton, false);              console.log("console device ready");              alert("device Ready");          }             function onBackButton(){              count++;              console.log("Trigger back button event " + count + " time");              $.mobile.changePage("#page3",'pop',false,true);          }            function onPause(){              console.log("myphonegap onPause function");          }             function onResume(){              console.log("myphonegap onResume function");          }            function isOnline(){              console.log("myphonegap isOnline function");          }             function isOffline(){              console.log("myphonegap isOffline function");          }            function onMenuButton(){              console.log("myphonegap onMenuButton function");                $.mobile.changePage("#page3",'pop',false,true);          }        </ script > </ head >   < body >      < div  id="page1" data-role="page" data-add-back-btn="true">          < header  data-role="header">< h1 >Hello world</ h1 ></ header >          < div  data-role="content" class="content">              < p >第一页</ p >              < p >< a  href="#page2">跳转到第二页</ a > </ p >          </ div >          < footer  data-role="footer">< h1 >Footer</ h1 ></ footer >      </ div >      < div  id="page2" data-role="page" data-add-back-btn="true">          < header  data-role="header">< h1 >Hello world</ h1 ></ header >          < div  data-role="content" class="content">              < p >第二页</ p >              < p >< a  href="#page3">跳转到第三页</ a > </ p >          </ div >          < footer  data-role="footer">< h1 >Footer</ h1 ></ footer >      </ div >      < div  id="page3" data-role="page" data-add-back-btn="true">          < header  data-role="header">< h1 >Hello world</ h1 ></ header >          < div  data-role="content" class="content">              < p >第三页</ p >              < p >< a  href="#page1">返回第一页</ a > </ p >          </ div >          < footer  data-role="footer">< h1 >Footer</ h1 ></ footer >      </ div >      < script  type="text/javascript" src="cordova.js"></ script > </ body >   </ html >

　　以下Code为注册事件监听

document.addEventListener('deviceready', onDeviceReady, false);          function onDeviceReady(){            document.addEventListener("backbutton", onBackButton, false);            document.addEventListener("pause", onPause, false);            document.addEventListener("resume", onResume, false);            document.addEventListener("online", isOnline, false);            document.addEventListener("offline", isOffline, false);            document.addEventListener("menubutton", onMenuButton, false);            console.log("console device ready");            alert("device Ready");        }

　　之后在Android Studio生成apk安装的Androd设备上。将会显示对应的Log。

本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/6636569.html，如需转载请自行联系原作者