A colleague taught me something recently that I didn’t know about the Cordova deviceready event. This is probably default JavaScript event behavior, but I was just unaware of it. When you register an event listener, if the event has already fired, registering a new event listener will cause the new event listener target function to fire.

I’m not sure how useful this information is, but I had to test it out to make sure it worked as I expected it to. In the sample application below, I have a simple Apache Cordova application that initializes then displays a page with a button on it. When you click the button, the application registers the deviceready event listener (which has already fired by the time the user can click the button) which causes the myNewFunction() function to fire immediately. Cool, eh?

Here’s the code:

{codecitation class="brush:javascript; gutter:true"}<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <script type="text/javascript" charset="utf-8" src="/cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    function onBodyLoad() {
      document.addEventListener("deviceready", onDeviceReady, false);
    }

    function onDeviceReady() {
      console.log("DeviceReady Fired");
      alert("DeviceReady Fired");
    }
    
    function myRegistFunction() {
      console.log("myRegistFunction Fired");
      console.log("Registering deviceReady listener");
      document.addEventListener("deviceready", myNewFunction, false);
    }
        
    function myNewFunction() {
      console.log("myNewFunction Fired");
    }
    </script>
  </head>
  <body onload="onBodyLoad()">
    <h1>DeviceReady test</h1>
    <p>Testing the Cordova deviceready event.</p>
    <input type="button" value="Click me!" onclick="myRegistFunction();" />
  </body>
</html>{/codecitation}

Here’s the application running on an iOS simulator.

Sample Cordova Appliction Running on an iOS Simulator
Figure 1

And here’s the output from the application’s call to console.log.

Xcode Output Log

Figure 2

Overall Rating (0)

0 out of 5 stars

Post comment as a guest

Attachments

Location

Share:
Rate this article :
0

People in this conversation

  • i am using cordova media api to apply sound. In this i used deviceready,I need to return a callback function executes after applied sound to another function. how i do it?

    Short URL:
  • Guest - Scott DeSapio

    Thanks for this. I was unaware as well and been working under the assumption that if it had fired already, I may have missed it.

    Short URL: