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. 2017-2018-1 JaWorld 团队作业--冲刺6

    2017-2018-1 JaWorld 团队作业--冲刺6(20162308) 实现 由于我在冲刺部分负责的是类之间的耦合,所以我就介绍一下本次游戏的总体实现. 我们定义了Sprite类,即精灵类,游 ...

  2. Python3基础 try-except 几个异常采取同样的处理方法

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. CentOS7.2 安装nginx-1.10.3

    nginx-1.10.3 下载nginx 检查是否安装了依赖库: [root@localhost ~]# rpm -q gcc gcc-4.8.5-11.el7.x86_64 [root@localh ...

  4. 试着用React写项目-利用Webpack搭环境

    转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...

  5. [fastjson] - fastjson中 JSONObject 和 JSONArray

    /** * 对jsonObject对象进行key的获取 * @param jsonObject */ public ArrayList<String> jsonKeyRecursion(J ...

  6. C# 后台模块 Word 模板操作

    public static string CreateWord() { //********************************************** //来自博客http://bl ...

  7. VM虚拟机安装的XP如何全屏

    首先安装install VMwear Tools..,如图:

  8. xtrabackup三种备份和还原（一）

    写这边博客心情不是太美好(博客已经停更2个多月了,实在是没心情学习新东西.2018我的黑暗年,呵呵)好了,不废话了,本文没有任何原理的部分,我也是刚开始接触xtrabackup这个工具.本文应该是一个 ...

  9. 黑暗世界的搜索引擎 https://fofa.so/ https://www.shodan.io https://www.zoomeye.org 查找设备漏洞

    from:http://www.freebuf.com/sectool/121339.html 什么是 Shodan? 首先,Shodan 是一个搜索引擎,但它与 Google 这种搜索网址的搜索引擎 ...

  10. JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...