LevinsonHou 2013-05-03
文章来自:http://blog.csdn.net/phonegapcn/article/details/6702378
PhoneGap整个生命周期内触发的事件。
backbutton
当用户在Android系统上点击后退按钮的时候触发此事件。
document.addEventListener("backbutton", yourCallbackFunction, false);
<!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 会触发“deviceready”事件 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap is loaded and it is now safe to make calls PhoneGap methods function onDeviceReady() { // 注册回退按钮事件监听器 document.addEventListener("backbutton", onBackKeyDown, false); } // 处理后退按钮操作 function onBackKeyDown() { } </script> </head> <body> </body> </html>
deviceready
当PhoneGap被完全加载后会触发该事件。
document.addEventListener("deviceready", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 就会触发“deviceready”事件。 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 function onDeviceReady() { // 现在可以安全使用PhoneGap API } </script> </head> <body> </body> </html>
function onLoad() { // BlackBerry OS 4浏览器不支持自定义事件。 // 因此通过手动方式等待,直到PhoneGap加载完毕。 var intervalID = window.setInterval( function() { if (PhoneGap.available) { window.clearInterval(intervalID); onDeviceReady(); } }, 500 ); } function onDeviceReady() { // 现在可以安全地调用PhoneGap API }
menubutton
当用户在Android系统上点击菜单按钮的时候触发此事件。
document.addEventListener("menubutton", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 会触发“deviceready”事件 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 function onDeviceReady() { // 注册菜单按钮事件监听器 document.addEventListener("menubutton", onMenuKeyDown, false); } // 处理菜单按钮操作 function onMenuKeyDown() { } </script> </head> <body onload="onLoad()"> </body> </html>
pause
当PhoneGap应用程序被放到后台的时候触发此事件。
document.addEventListener("pause", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 就会触发“deviceready”事件。 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 function onDeviceReady() { document.addEventListener("pause", onPause, false); } // 处理pause事件 function onPause() { } </script> </head> <body> </body> </html>
resume
当PhoneGap应用程序被恢复到前台运行的时候触发此事件。
document.addEventListener("resume", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 就会触发“deviceready”事件。 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法。 function onDeviceReady() { document.addEventListener("resume", onResume, false); } // 处理resume事件 function onResume() { } </script> </head> <body> </body> </html>
online
当PhoneGap应用程序在线(连接到因特网)的时候触发此事件。
document.addEventListener("online", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 就会触发“deviceready”事件。 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法。 function onDeviceReady() { document.addEventListener("online", onOnline, false); } // 处理online事件 function onOnline() { } </script> </head> <body> </body> </html>
在初次启动的情况下,第一个online事件(如果有的话)将需要至少1秒钟才被触发
offline
当PhoneGap应用程序离线(没有连接到因特网)的时候触发此事件。
document.addEventListener("offline", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 就会触发“deviceready”事件。 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法。 function onDeviceReady() { document.addEventListener("offline", onOffline, false); } // 处理offline事件 function onOffline() { } </script> </head> <body> </body> </html>
Searchbutton
当用户在Android系统上点击搜索按钮的时候触发该事件。
document.addEventListener("searchbutton", yourCallbackFunction, false);
完整的范例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 // 当PhoneGap加载完毕并开始和本地设备进行通讯, // 会触发“deviceready”事件。 document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 function onDeviceReady() { // 注册搜索按钮事件监听器 document.addEventListener("searchbutton", onSearchKeyDown, false); } // 处理搜索按钮操作 function onSearchKeyDown() { } </script> </head> <body onload="onLoad()"> </body> </html>