Phonegap Events Tutorial

In this tutorials we’re going to see different events in phonegap. There are almost 10 event types in phonegap those are

  • deviceready
  • pause
  • resume
  • backbutton
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton

Phonegap Events Step by Step Tutorials

Create your phonegap application

cordova create Events com.phonegap.events Events

Change your Current working directory

cd Events

Add Your platform

cordova platform add android

you can add ios, windows platform too

Edit your html file or javascript fileĀ file

In this tutorials, i integrated all events with index.html

How to add Event Listener ?

What is Event Listener?

Event Listener used for listening occurrence of events (such as deviceready, volumebuttonup ..etc ), and do some user defined action according that event.

How to add Event Listener ?

document.addEventListener("deviceready", yourCallbackFunction, false);

Example Program (I just added alert box for all event occurrence, you can customise as your wish )


<html>
<head>
<script type="text/javascript"/>
function onLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
alert("Device Ready!!");
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
}
function onPause()
{
alert("pause Event Accured");
}
function onResume()
{
alert("Resume Event Accoured");
}
function onBackKeyDown()
{
alert("back button pressed");
}
function onMenuKeyDown()
{
alert("menubutton pressed");
}
function onVolumeDownKeyDown()
{
alert("Volume Down button pressed");
}
function onVolumeUpKeyDown()
{
alert("Volume Up button pressed");
}
</script>
</head>
<body onload="onLoad()"></body>
</html>

Share This

Share this post with your friends!