文档章节

PhoneGap API介绍:Events

J
 Java编程思想
发布于 2014/07/21 10:34
字数 2578
阅读 216
收藏 4

事件类型

backbutton

  • 当用户在Android系统上点击后退按钮的时候触发此事件。

document.addEventListener("backbutton", yourCallbackFunction, false);

详述

  • 如果你需要在Android系统上重载默认后退按钮的行为,可以通过注册一个事件监听器来监听“backbutton”事件。它不再需求调用任何其他方法来重载后退按钮行为,现在你只需要为“backbutton”事件注册一个事件监听器。

  • 通常情况下,你需要在接收到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

支持的平台

  • Android

简单的范例

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

完整的范例

<!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);

详述

  • 这是每个PhoneGap应用程序都会用到的重要事件。

  • PhoneGap包含两套代码库:本地代码库和JavaScript代码库。当本地代码加载时会显示一个自定义的加载图片,但是,JavaScript只是在DOM加载后就被加载。这潜在的说明用户的Web应用程序可以在PhoneGap加载完成之前调用相应的JavaScript函数。

  • PhoneGap一旦完全加载就会触发deviceready事件。当设备触发该事件后,用户就可以安全进行PhoneGap函数调用。

  • 通常情况下,你会希望在HTML文件的DOM加载完毕后使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android

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

  • iPhone

简单的范例

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

完整的范例

<!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>

BlackBerry (OS 4.6) 的特异情况

  • RIM的BrowserField(网页浏览器视图)不支持自定义事件,所以deviceready事件不会被触发。

  • 一种解决方法是一直手动查询PhoneGap.available方法直到PhoneGap完全加载完毕。

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);

详述

  • 如果你需要在Android系统上重载默认菜单按钮的行为,可以通过注册一个事件监听器来监听“menubutton”事件。

  • 通常情况下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

支持的平台

  • Android

简单的范例

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

完整的范例

<!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);

详述

  • PhoneGap包含两套代码库:本地代码库和JavaScript代码库。当本地代码将应用程序放到后台的时候会触发pause事件。

  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android

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

  • iPhone

简单的范例

document.addEventListener("pause", onPause, false);  function onPause() {    // 处理pause事件 }

完整的范例

<!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>

iOS的特异情况

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

resume

  • 当PhoneGap应用程序被恢复到前台运行的时候触发此事件。

document.addEventListener("resume", yourCallbackFunction, false);

详述

  • PhoneGap包含两套代码库:本地代码库和JaPhoneGap包含两套代码库:本地代码库和JavaScript代码库。当本地代码将应用程序从后台提取到前台运行的时候触发resume事件。

  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android

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

  • iPhone

简单的范例

document.addEventListener("resume", onResume, false);  function onResume() {    // 处理resume事件 }

完整的范例

<!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);

详述

  • 当应用程序的网络连接改变为online的时候触发online事件。

  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android

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

  • iPhone

简单的范例

document.addEventListener("online", onOnline, false);   function onOnline() {     // 处理online事件 }

完整的范例

<!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>

iOS的特异情况

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

offline

  • 当PhoneGap应用程序离线(没有连接到因特网)的时候触发此事件。

document.addEventListener("offline", yourCallbackFunction, false);

详述

  • 当应用程序的网络连接改变为offline的时候触发offline事件。

  • 通常情况下,你会希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一个事件监听器。

支持的平台

  • Android

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

  • iPhone

简单的范例

document.addEventListener("offline", onOffline, false);   function onOffline() {     // 处理offline事件 }

完整的范例

<!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>

iOS的特异情况

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

Searchbutton

  • 当用户在Android系统上点击搜索按钮的时候触发该事件。

document.addEventListener("searchbutton", yourCallbackFunction, false);

详述

  • 如果你需要在Android系统上重载默认搜索按钮的行为,可以通过注册一个事件监听器来监听“searchbutton”事件。

  • 通常情况下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

支持的平台

  • Android

简单的范例

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

完整的范例

<!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>


本文转载自:http://blog.csdn.net/zhaokuner/article/details/7549664

J
粉丝 28
博文 167
码字总数 10302
作品 0
广州
程序员
私信 提问
小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载一(PhoneGap中的

之前本博连载过《构建跨平台APP:jQuery Mobile移动应用实战》一书,深受移动开发入门人员的喜爱。 从现在开始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望曾经是小白的你们,已经变...

woiwoi
2014/10/21
237
2
PhoneGap 1.4 发布,引入构建云服务

今天 PhoneGap 宣布了 1.4 版本的发布,该版本除了修复 1.3 中的许多 bug 之外,还引入了 PhoneGap 构建云服务的完全支持。该服务可以在线将开发者在云端的 HTML、JavaScript 和 CSS打包并发...

红薯
2012/02/01
3.1K
0
使用The PhoneGap Developer App实现快速调试项目

如今,基于 PhoneGap 的混合 APP 开发技术更加成熟,优势更加凸显。移动互联网的迅猛发展,Android 和 iOS 的版本快速迭代,使 HTML5 的性能问题逐步解决。仅仅在 PhoneGap 官网上,已经有来...

crazymus
2015/04/26
1K
0
phonegap安装 环境搭建与配置详解( 完整版 提供下载地址)

phonegap 安装 环境搭建 完整版 刚刚接触 phonegap 因为配环境遇到各种各样问题.花了一下午时间才完成,所以写一个篇文章希望能给大家节约点时间. 本文主讲windows系统下的phonegap的环境搭建...

james_laughing
2014/12/17
37
0
phonegap安装 环境搭建与配置详解( 完整版 提供下载地址)

phonegap 安装 环境搭建 完整版 刚刚接触 phonegap 因为配环境遇到各种各样问题.花了一下午时间才完成,所以写一个篇文章希望能给大家节约点时间. 本文主讲windows系统下的phonegap的环境搭建...

james_laughing
2014/12/17
142
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
150
4
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部