Search code examples
javascriptphonegap

phonegap index.js file why app.receivedEvent not this.receivedEvent


Can anybody please tell me why in the following code app.receivedEvent('deviceready') is used, and not this.receivedEvent('deviceready')?

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

Solution

  • The comments actually explain the reason for using app over this:

    // The scope of 'this' is the event. In order to call the 'receivedEvent' 
    // function, we must explicitly call 'app.receivedEvent(...);'
    

    Basically, the event handler will invoke the event callback with its own context of this (where this will be the event object).

    The method receivedEvent is defined in app and not this (set to the event object inside an event callback function). To invoke receivedEventil in this case you would call it as a method on it's containing object app:

    app.receivedEvent(...);