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. Opencv3_Learning

    git地址 采用jupyter notebook进行编程,语言为python. 感谢博主--戳 这类东西真的是不是天天打,就是打过就忘.. 有志者事竟成,破釜沉舟,百二秦关终属楚. 苦心人天不负,卧薪 ...

  2. c#解析Lrc歌词文件

    看到很多人解析歌词文件时写了一大片的字符处理代码,而且看得不是很明白,所以自己研究了一下, 首先来了解下Lrc文件 时间格式: 1.标准格式: [分钟:秒.毫秒] 歌词 注释:括号.冒号.点号全都要求 ...

  3. ZOJ 3747 Attack on Titans

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3747 题意: 现在有n个士兵进行排序,只有G.R.P三种士兵,要求至少有m ...

  4. hdu 4747 mex 线段树+思维

    http://acm.hdu.edu.cn/showproblem.php?pid=4747 题意: 我们定义mex(l,r)表示一个序列a[l]....a[r]中没有出现过得最小的非负整数, 然后我 ...

  5. hdu 1251 trie树

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Problem De ...

  6. class []的用法

    span[class='test']    =>匹配所有带有class类名test的span标签 span[class *='test']  =>匹配所有包含了test字符串的class类 ...

  7. QWebEngineView_简单例子_01

    工程名 : WebEngine01 1.WebEngine01.pro #------------------------------------------------- # # Project c ...

  8. kali debian linux 的samba 共享设置

    1) 首先,默认的源http.kali.org 会自动帮你找镜像,问题是他找到了 mirrors.neusoft.edu.cn , 这个源速度虽然快,却是有问题的. 安装不了cifs-utils 2) ...

  9. Mac上安装配置和简单使用PostgreSQL（仍然很不懂）

    因为想要使用推荐的rails-template.需要使用postgres.并初始化了一个用户postgres,密码是postgres.( e.g. $ createuser -d postgres ) ...

  10. hdu 1385 floyd字典序

    Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...