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，如需转载请自行联系原作者
