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。

Phonegap 事件机制的更多相关文章

  1. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  2. tkinter事件机制

    一.tkinter.Event tkinter的事件机制跟js是一样的,也是只有一个Event类,这个类包罗万象,集成了键盘事件,鼠标事件,包含各种参数. 不像java swing那种强类型事件,sw ...

  3. [解惑]JavaScript事件机制

    群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...

  4. Atitit  数据库的事件机制--触发器与定时任务attilax总结

    Atitit  数据库的事件机制--触发器与定时任务attilax总结 1.1. 事件机制的图谱1 2. 触发器的类型2 3. 实现原理 After触发器 Vs Instead Of触发器2 3.1. ...

  5. 深入浅出iOS事件机制

    原文地址: http://zhoon.github.io/ios/2015/04/12/ios-event.html 本文章将讲解有关iOS事件的传递机制,如有错误或者不同的见解,欢迎留言指出. iO ...

  6. Java 事件机制

    java事件机制包括三个部分:事件.事件监听器.事件源. 1.事件.一般继承自java.util.EventObject类,封装了事件源对象及跟事件相关的信息,用于listener的相应的方法之中,作 ...

  7. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  8. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

  9. DOM事件机制进一步理解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. MysqL中的Show Index From Table_Name命令说明

    我们在分析SQL性能的时候,会使用到show index from table_name命令,会返回出下面的列 | Table | Non_unique | Key_name | Seq_in_ind ...

  2. JAVA面试题整理（5）-数据库

    数据库 1.Oracle/mysql分页有什么优化 2.悲观锁.乐观锁 悲观锁(Pessimistic Concurrency Control,PCC):假定会发生并发冲突,屏蔽一切可能违反数据完整性 ...

  3. redis未授权访问漏洞总结

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 漏洞介绍: Redis 默认情况下,会绑定在 0.0.0.0 ...

  4. js输出大段html文档简便方法

    原文链接:https://zhidao.baidu.com/question/586477237.html 把要输出的html全部写在某个id中,然后复制过去,你想放多少都行 <script t ...

  5. vs+qt使用资源文件

    1.在Resources目录新建一个.qrc文件 2.在解决方案的Resource Files中添加这个文件 3.为这个qrc添加资源,建议把资源都放进Resources

  6. Python学习札记(四十一) IO 1

    参考:IO NOTE A.Pre 1.IO在计算机中指Input/Output,也就是输入和输出. 2.IO编程中,Stream(流)是一个很重要的概念,可以把流想象成一个水管,数据就是水管里的水,但 ...

  7. ref用于类类型

    static void Main(string[] args)         { Fruit f = new Fruit()      { Weight = 1, Color = "&qu ...

  8. 癌症免疫细胞治疗知识：CAR-T与TCR-T的区别在哪里？--转载

    肿瘤免疫治疗,实际上分为两大类.一种把肿瘤的特征“告诉”免疫细胞,让它们去定位,并造成杀伤:另一种是解除肿瘤对免疫的耐受/屏蔽作用,让免疫细胞重新认识肿瘤细胞,对肿瘤产生攻击(一般来说,肿瘤细胞会巧妙 ...

  9. 使用 shinydashboard

    除了 shiny 扩展包提供的函数之外,RStudio 也开发了一个 shinydashboard 扩展包 (http://rstudio.github.io/shinydashboard/),它呈现 ...

  10. kafka 官方示例代码--消费者

    kafka 0.9.0添加了一套新的Java 消费者API,用以替换之前的high-level API (基于ZK) 和low-level API.新的Java消费者API目前为测试版.另外kafka ...