PhoneGap API介绍:Events

移动开发
本文将介绍PhoneGap API——Events:通过JavaScript截获本地事件。PhoneGap整个生命周期内触发的事件。

事件类型

  backbutton

  • 当用户在Android系统上点击后退按钮的时候触发此事件。
  1. document.addEventListener("backbutton", yourCallbackFunction, false); 

详述

  • 如果你需要在Android系统上重载默认后退按钮的行为,可以通过注册一个事件监听器来监听“backbutton”事件。它不再需求调用任何其他方法来重载后退按钮行为,现在你只需要为“backbutton”事件注册一个事件监听器。
  • 通常情况下,你需要在接收到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

支持的平台

  • Android

简单的范例

  1. document.addEventListener("backbutton", onBackKeyDown, false); 
  2.      
  3. function onBackKeyDown() { 
  4.    // 处理后退按钮操作 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.     // 会触发“deviceready”事件 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap is loaded and it is now safe to make calls PhoneGap methods 
  16.     function onDeviceReady() { 
  17.         // 注册回退按钮事件监听器 
  18.            document.addEventListener("backbutton", onBackKeyDown, false); 
  19.     } 
  20.      
  21.     // 处理后退按钮操作 
  22.     function onBackKeyDown() { 
  23.     } 
  24.  
  25. </script> 
  26. </head> 
  27. <body> 
  28. </body> 
  29. </html> 

deviceready

  • 当PhoneGap被完全加载后会触发该事件。
  1. document.addEventListener("deviceready", yourCallbackFunction, false); 

详述

  • 这是每个PhoneGap应用程序都会用到的重要事件。
  • PhoneGap包含两套代码库:本地代码库和JavaScript代码库。当本地代码加载时会显示一个自定义的加载图片,但是,JavaScript只是在DOM加载后就被加载。这潜在的说明用户的Web应用程序可以在PhoneGap加载完成之前调用相应的JavaScript函数。
  • PhoneGap一旦完全加载就会触发deviceready事件。当设备触发该事件后,用户就可以安全进行PhoneGap函数调用。
  • 通常情况下,你会希望在HTML文件的DOM加载完毕后使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. document.addEventListener("deviceready", onDeviceReady, false); 
  2.  
  3. function onDeviceReady() { 
  4.     // 现在可以安全使用PhoneGap API 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.     // 就会触发“deviceready”事件。 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 
  16.     function onDeviceReady() { 
  17.        // 现在可以安全使用PhoneGap API 
  18.     } 
  19.  
  20. </script> 
  21. </head> 
  22. <body> 
  23. </body> 
  24. </html> 

BlackBerry (OS 4.6) 的特异情况

  • RIM的BrowserField(网页浏览器视图)不支持自定义事件,所以deviceready事件不会被触发。
  • 一种解决方法是一直手动查询PhoneGap.available方法直到PhoneGap完全加载完毕。
  1. function onLoad() { 
  2.     // BlackBerry OS 4浏览器不支持自定义事件。 
  3.     // 因此通过手动方式等待,直到PhoneGap加载完毕。 
  4.     var intervalID = window.setInterval( 
  5.         function() { 
  6.              if (PhoneGap.available) { 
  7.              window.clearInterval(intervalID); 
  8.              onDeviceReady(); 
  9.          } 
  10.      }, 
  11.      500 
  12.     ); 
  13.  
  14. function onDeviceReady() { 
  15.     // 现在可以安全地调用PhoneGap API 

menubutton

  • 当用户在Android系统上点击菜单按钮的时候触发此事件。
  1. document.addEventListener("menubutton", yourCallbackFunction, false); 

详述

  • 如果你需要在Android系统上重载默认菜单按钮的行为,可以通过注册一个事件监听器来监听“menubutton”事件。
  • 通常情况下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

支持的平台

  • Android

简单的范例

  1. document.addEventListener("menubutton", onMenuKeyDown, false); 
  2.   
  3. function onMenuKeyDown() { 
  4.     //处理菜单按钮操作 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.     // 会触发“deviceready”事件 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 
  16.     function onDeviceReady() { 
  17.         // 注册菜单按钮事件监听器 
  18.         document.addEventListener("menubutton", onMenuKeyDown, false); 
  19.     } 
  20.      
  21.     // 处理菜单按钮操作 
  22.     function onMenuKeyDown() { 
  23.     } 
  24.  
  25. </script> 
  26. </head> 
  27. <body onload="onLoad()"> 
  28. </body> 
  29. </html> 

pause

  • 当PhoneGap应用程序被放到后台的时候触发此事件。
  1. document.addEventListener("pause", yourCallbackFunction, false); 

详述

  • PhoneGap包含两套代码库:本地代码库和JavaScript代码库。当本地代码将应用程序放到后台的时候会触发pause事件。
  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. document.addEventListener("pause", onPause, false); 
  2.  
  3. function onPause() { 
  4.    // 处理pause事件 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.      
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.     // 就会触发“deviceready”事件。 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 
  16.     function onDeviceReady() { 
  17.         document.addEventListener("pause", onPause, false); 
  18.     } 
  19.      
  20.     // 处理pause事件 
  21.     function onPause() { 
  22.     } 
  23.  
  24. </script> 
  25. </head> 
  26. <body> 
  27. </body> 
  28. </html> 

iOS的特异情况

  • 在pause事件处理过程中,不但任何通过Objective-C的调用不会工作,而且任何交互性的调用也不会工作,比如警示功能。这意味着你不能调用console.log(及其变种),且任何来自插件或PhoneGap的API的调用都不会有所反应。这些调用只有在应用程序恢复后才会被处理(在下一轮运行循环中处理)。

resume

  • 当PhoneGap应用程序被恢复到前台运行的时候触发此事件。
  1. document.addEventListener("resume", yourCallbackFunction, false); 

详述

  • PhoneGap包含两套代码库:本地代码库和JaPhoneGap包含两套代码库:本地代码库和JavaScript代码库。当本地代码将应用程序从后台提取到前台运行的时候触发resume事件。
  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. document.addEventListener("resume", onResume, false); 
  2.  
  3. function onResume() { 
  4.    // 处理resume事件 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.     // 就会触发“deviceready”事件。 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法。 
  16.     function onDeviceReady() { 
  17.         document.addEventListener("resume", onResume, false); 
  18.     } 
  19.      
  20.     // 处理resume事件 
  21.     function onResume() { 
  22.     } 
  23.      
  24. </script> 
  25. </head> 
  26. <body> 
  27. </body> 
  28. </html> 

online

  • 当PhoneGap应用程序在线(连接到因特网)的时候触发此事件。
  1. document.addEventListener("online", yourCallbackFunction, false); 

详述

  • 当应用程序的网络连接改变为online的时候触发online事件。
  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. document.addEventListener("online", onOnline, false); 
  2.   
  3. function onOnline() { 
  4.     // 处理online事件 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.       // 就会触发“deviceready”事件。 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法。 
  16.     function onDeviceReady() { 
  17.         document.addEventListener("online", onOnline, false); 
  18.     } 
  19.      
  20.     // 处理online事件 
  21.     function onOnline() { 
  22.     } 
  23.  
  24. </script> 
  25. </head> 
  26. <body> 
  27. </body> 
  28. </html> 

iOS的特异情况

  • 在初次启动的情况下,***个online事件(如果有的话)将需要至少1秒钟才被触发。

offline

  • 当PhoneGap应用程序离线(没有连接到因特网)的时候触发此事件。
  1. document.addEventListener("offline", yourCallbackFunction, false); 

详述

  • 当应用程序的网络连接改变为offline的时候触发offline事件。
  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. document.addEventListener("offline", onOffline, false); 
  2.   
  3. function onOffline() { 
  4.     // 处理offline事件 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.       // 就会触发“deviceready”事件。 
  13.     document.addEventListener("deviceready", onDeviceReady, false); 
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法。 
  16.     function onDeviceReady() { 
  17.         document.addEventListener("offline", onOffline, false); 
  18.     } 
  19.      
  20.     // 处理offline事件 
  21.     function onOffline() { 
  22.     } 
  23.  
  24. </script> 
  25. </head> 
  26. <body> 
  27. </body> 
  28. </html> 

iOS的特异情况

  • 在初次启动的情况下,***个offline事件(如果有的话)将需要至少1秒钟才被触发。

Searchbutton

  • 当用户在Android系统上点击搜索按钮的时候触发该事件。
  1. document.addEventListener("searchbutton", yourCallbackFunction, false);  

详述

  • 如果你需要在Android系统上重载默认搜索按钮的行为,可以通过注册一个事件监听器来监听“searchbutton”事件。
  • 通常情况下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

支持的平台

  • Android

简单的范例

  1. document.addEventListener("searchbutton", onSearchKeyDown, false); 
  2.   
  3. function onSearchKeyDown() { 
  4.     // 处理搜索按钮操作 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>PhoneGap Device Ready Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 当PhoneGap加载完毕后调用onDeviceReady回调函数。 
  10.     // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。 
  11.     // 当PhoneGap加载完毕并开始和本地设备进行通讯, 
  12.     // 会触发“deviceready”事件。 
  13.     document.addEventListener("deviceready", onDeviceReady, false);   
  14.      
  15.     // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法 
  16.     function onDeviceReady() { 
  17.         // 注册搜索按钮事件监听器 
  18.         document.addEventListener("searchbutton", onSearchKeyDown, false); 
  19.     } 
  20.      
  21.     // 处理搜索按钮操作 
  22.     function onSearchKeyDown() { 
  23.     } 
  24.  
  25. </script> 
  26. </head> 
  27. <body onload="onLoad()"> 
  28. </body> 
  29. </html> 

 

责任编辑:佚名 来源: PhoneGap中国
相关推荐

2011-07-05 17:29:53

PhoneGapevents

2011-09-13 10:17:26

PhoneGap AP

2011-12-19 16:09:32

PhoneGap APCamera

2011-12-20 11:20:46

PhoneGap APCompass

2011-12-20 15:34:55

PhoneGap APConnection

2011-12-21 21:56:45

PhoneGap APFile

2011-12-19 15:30:25

AccelerometPhoneGap AP

2011-12-20 13:32:52

PhoneGap APContacts

2011-12-20 16:09:57

PhoneGap APDevice

2011-12-22 09:54:40

PhoneGap APMedia

2011-12-22 09:27:36

PhoneGap APGeolocation

2011-12-19 16:26:39

PhoneGap APCapture

2011-12-22 10:33:39

PhoneGap APNotificatio

2011-12-22 10:45:32

PhoneGap APStorage

2011-12-30 13:47:57

PhoneGap AP视频Contacts

2011-12-30 13:59:38

PhoneGap APDevice视频

2011-12-30 14:09:32

PhoneGap APCompass视频

2011-12-30 14:13:05

PhoneGap APCamera视频

2011-12-30 14:05:17

PhoneGap APConnection视频

2011-12-30 14:16:02

AccelerometPhoneGap AP视频
点赞
收藏

51CTO技术栈公众号