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. bzoj1615 / P2903 [USACO08MAR]麻烦的干草打包机The Loathesome Hay Baler

    P2903 [USACO08MAR]麻烦的干草打包机The Loathesome Hay Baler 细节题.$O(n^{2})$的$bfs$可过. #include<iostream> ...

  2. 20155201 2016-2017-2 《Java程序设计》第一周学习总结

    20155201 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 每一章的问题: 第一章 Java ME都有哪些成功的平台? 第二章 哪些情况可以使用impo ...

  3. uboot能ping通本机无法ping通本机上搭建的虚拟机

    注意 转载请注明出处:https://www.cnblogs.com/dakewei 一.背景 1.1 uboot不能被其它主机ping通,这是由于uboot没有对其它主机发送过来的arp包进行响应, ...

  4. 我的第一个Windows服务

    代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

  5. LeetCode——Rotate Image

    1. Question You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees ( ...

  6. Markdown中的表格

    参考:在简书上用Markdown写表格 | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | r ...

  7. 基于spring boot admin 做监控的一些问题记录

    问题一 各个健康节点权限问题 解决方式 加入权限模块 <dependency> <groupId>org.springframework.boot</groupId> ...

  8. 使用 Rcpp

    正如我们所提到的那样,并行计算只有在每次迭代都是独立的情况下才可行,这样最终结果才不会依赖运行顺序.然而,并非所有任务都像这样理想.因此,并行计算可能会受到影响.那么怎样才能使算法快速运行,并且可以轻 ...

  9. Android Studio之高德地图实现定位和3D地图显示

    在应用开发中,地图开发是经常需要使用的“组件”,国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码. 效果如图: 首先 ...

  10. 基于深度学习的恶意样本行为检测（含源码） ----采用CNN深度学习算法对Cuckoo沙箱的动态行为日志进行检测和分类

    from:http://www.freebuf.com/articles/system/182566.html 0×01 前言 目前的恶意样本检测方法可以分为两大类:静态检测和动态检测.静态检测是指并 ...