Cordova events in Enyo 2.7

Hello all,

I am trying to build an Enyo app across to android using Cordova. I need to get an event when a hardware volume button is pressed. Cordova provides a very easy to use interface for listening to volume button events:

document.addEventListener("volumedownbutton", onVolumeKeyDown); function onVolumeKeyDown() { alert('something') }

The issue is that when I try to add this code to my Enyo app or listen through the dispatcher, I can't see the event. Can anyone help me with listening to system events?


  • If you've used dispatcher, the events will be forwarded by Signals because they targeting document or window. Here's an example of that.

    If you don't want to use dispatcher, you should be able to use code like you have above to receive the event. Here's an example in that vein using a handler bound to an enyo component instance.
  • edited February 2017
    Thanks for your response, this helped me to find my issue.

    For anyone else that is trying to do something similar: my issue was that this particular event listener (as with many cordova specific events) has to be registered after the body is ready. In order to make this happen I put some custom javascript into my index.html that registers an event listener at the proper time, and emits a custom event when my event listener sees the volume button event is called. then in enyo I can listen for that custom event. my index.html:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>[DEVELOPMENT] eventTestEnyo</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <link rel="stylesheet" href="enyo.css"> <link rel="stylesheet" href="eventTestEnyo.css"> <script type="text/javascript" charset="utf-8"> function onLoad() { document.addEventListener("volumedownbutton", onVolumeKeyDown); document.addEventListener("volumeupbutton", onVolumeKeyDown); } function onVolumeKeyDown(e) { var ev = new CustomEvent('volumechange', { detail: { value: } }); document.dispatchEvent(ev); } </script> <script src="enyo.js"></script> <script src="eventTestEnyo.js"></script> </head> <body onload="onLoad()" class="enyo-unselectable"></body> </html>

    Then in my main view I pretty much just copied and pasted your code:

    var kind = require('enyo/kind'); var Control = require('enyo/Control'); var Signals = require('enyo/Signals'); module.exports = kind({ kind: Control, components: [ {name: 'log', kind: Control} ], rendered: kind.inherit(function (sup) { return function () { sup.apply(this, arguments); this.handleVolumeChange = this.handleVolumeChange.bind(this); document.addEventListener('volumechange', this.handleVolumeChange); }; }), destroy: kind.inherit(function (sup) { return function () { sup.apply(this, arguments); document.removeEventListener('volumechange', this.handleVolumeChange); }; }), handleVolumeChange: function (ev) { this.$.log.set('content', ev.detail.value); } });
  • You could also use enyo/ready to defer attaching the event handlers until DOMContentLoaded which would allow you to minimize customizing the index.html:
    var ready = require('enyo/ready');
    function onVolumeKeyDown(e) {
        var ev = new CustomEvent('volumechange', {
        detail: {
    ready(function () {
      document.addEventListener("volumedownbutton", onVolumeKeyDown);
      document.addEventListener("volumeupbutton", onVolumeKeyDown);
Sign In or Register to comment.