Cordova Events

Cordova provides a set of various events for your application. These events are fired by the application, if required. We know that sometimes, we often need to determine when our application enters the device background and when it comes back into the foreground. So, for such tasks, we have event listeners.

Here, we define an application code that can add the event listeners.

HTML File

<!DOCTYPE html>
<html>
    <head>
    <title>Device Ready </title>
    <script type="text/javascript" charset="utf-8" src="app.js"></script>
    <script type="text/javascript" charset="utf-8" src="apache.js"></script>
    </head>
    <body onload="onLoad()">
    </body>
</html>

JS File

// Waiting  for the libraries of device API to load
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
    document.addEventListener("pause", onPause, false);
    document.addEventListener("resume", onResume, false);
    document.addEventListener("menubutton", onMenuKeyDown, false);
    // similar listeners are added for another events
}
function onPause() {
    // Handles  pause event
}
function onResume() {
    // Handles resume event
}
function onMenuKeyDown() {
    // Handles menubutton event
}
// similar event handlers are added for another events

The following table lists the cordova events and the supported platforms:

Supported Platforms/ Events	Android	Ios	Windows
deviceready	•	•	•
pause	•	•	•
resume	•	•	•
backbutton	•	×	•
menubutton	•	×	×
searchbutton	•	×	×
startcallbutton	×	×	×
endcallbutton	×	×	×
volumedownbutton	•	×	×
volumeupbutton	•	×	×
activated	×	×	•

deviceready

This event is fired when the Cordova application is fully loaded. It is an essential event for any of the applications. We need to use this event for getting the information about the device APIs that if they have loaded and are ready to access.

The Cordova application provides two code bases i.e., native and JavaScript. A custom image is displayed when the native code loads. However, the DOM loads when JavaScript will load.

Once this event gets fired, we can make calls safely to the Cordova APIs.

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // device APIs are safely use 
}

pause

This event gets fired when a native platform is used to run the application into the background. It mainly occurs when a user switched to the other application

Quick Example

document.addEventListener("pause", onPause, false);
function onPause() {
  }

resume

This event gets fired only when a native platform leaves the application from the background.

Quick Example

document.addEventListener("resume", onResume, false);
function onResume() {
}

backbutton

When a user clicked on the back button, this event is fired. Register an event listener for backbutton event, if you want to override the behaviour of default back-button.

Quick Example

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
}

menubutton

When a user clicked on the menu button, this event is fired. To overrides the behaviour of default menu button, need to apply an event handler.

Quick Example

document.addEventListener("menubutton", onMenuKeyDown, false);
function onMenuKeyDown() {
    // Handles back button
}

searchbutton

On Android platform, this event is fired only when a user clicked on the search button. We need to register an event listener for this event to override the behaviour of default search button.

Quick Example

document.addEventListener("searchbutton", onSearchKeyDown, false);
function onSearchKeyDown() {
}

startcallbutton

When a user clicks on the start call button, then this event is fired. We need to register an event listener for this particular event to override the behavior of default start call.

Quick Example

document.addEventListener("startcallbutton", onStartCallKeyDown, false);
function onStartCallKeyDown() {
}

endcallbutton

When a user clicks on the end call button, this event is fired. To override the behavior of default end call, we can use this event.

Quick Example

document.addEventListener("endcallbutton", onEndCallKeyDown, false);
function onEndCallKeyDown() {
}

volumedownbutton

When a user clicks on the volume down button, this event is fired. We need to register an event listener for this particular event to override the behavior of default volume down.

Quick Example

document.addEventListener("volumedownbutton",onVolumeDownKeyDown, false);
function onVolumeDownKeyDown() {
}

volumeupbutton

When a user clicks on the volume up button, this event is fired. We need to register an event listener for this particular event to override the behavior of the default volume up.

Quick Example

document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);

function onVolumeUpKeyDown() {
}

activated

This event is fired only when it occur the Windows Runtime activation.

Quick Example

document.addEventListener("activated", activated, false);

function activated(args) {
    if (args && args.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
       // Using args.raw to get the native StorageFile object
        Windows.Storage.FileIO.readTextAsync(args.raw.detail[0].files[0]).done(function (text) {
            console.log(text);
        }, function (err) {
            console.error(err);
        });
    }
}

Next TopicCordova Hooks

← prev next →