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. Django学习笔记之form组件的局部钩子和全局钩子

    本文通过注册页面的form组件,查看其中使用的全局钩子和局部钩子. # Create your views here. class RegForm(forms.Form): username = fo ...

  2. 清理tomcat日志大的文件

    先看一个命令: [root@weblogic logs]# catalina.--.log icatalina.--:-.out icatalina.--:-.out localhost_access ...

  3. 20145325张梓靖 《Java程序设计》第3周学习总结

    20145325张梓靖 <Java程序设计>第3周学习总结 教材学习内容总结 类与对象 类,就相当于设计图纸,用"new"创建的对象,就是依据设计图做成的成品:设计图纸 ...

  4. 四种常见的 POST 提交数据方式 专题

    定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码.默认地,表单数据会编码为 "application/x-www-form-urlencoded". ...

  5. 'workspace' in VS Code

    What is a 'workspace' in VS Code? You can save settings at the workspace level and you can open mult ...

  6. js二进制转换十进制

    var a = 1010;alert(a.toString(2)); //转成二进制 alert(parseInt( "101110100 ",2)) ;//转成十进制 null

  7. 【P4语言学习】basic_routing.p4

    headers.p4 /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Vers ...

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

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

  9. 使用actioncable做的notification（GoRails教学,2课）

    GoRails视频系列: 1.   用actioncable建立Notifications 2.  见博客: 3.  非认证/登陆user不能使用actioncable 用ActionCable 建立 ...

  10. ultraedit开发使用技巧

    抛开Mybatis和Hibernate这些dao框架,如果维护老项目时或者不得不用sql拼接时,一个几百行的sql光是去掉navicat中查询的注释或者在sql前后加上双引号就已经很费劲,影响开发效率 ...