How to detect mobileinit and custom events through Javascripts AddEventListener?

Question

I have an overrides.js script, which sets defaults in my application like so:

$(document).bind("mobileinit", function(){
    $.mobile.autoInitializePage = false;
    $.mobile.pushStateEnabled = false;
    $.mobile.defaultPageTransition = "fade";
    $('html').addClass('viewGrid');
    console.log("mobileinit detected in overrides");
    $(window).trigger('jqm-ready');
    });

The overrides.js is pulled in via requireJS after Jquery has loaded and before Jquery Mobile loads. On my page I have this snippet in the footer:

console.log("page done loading");
window.addEventListener('jqm-ready', function(){
    console.log("detected jqm-ready")
    // run some code
    });

document.addEventListener('mobilelinit', function(){
    console.log("mobilelinit detected from page");
    // run some code
    });

My console displays the following:

page done loading
mobileinit detected in overrides

So, I'm not able to detect mobileinit or my custom jqm-ready event through my eventListener added on the page.

As I'm using requireJS I cannot use Jquery to detect mobileinit/jqm-ready, because the page is parsed before Jquery has loaded. I hoped to be able to detect either event, but no luck so far. I need to detect them because the code I need to run needs to bind to Jquery Mobile events.

Question:
Is there something wrong in my snippet or why can't I bind to either mobileinit or jqm-ready like this?

Answer 1

Ok. I got it... I think I can't use Jquery's trigger for events that I added listeners to using addEventListener. But maybe not. Anyway this works:

var trigAnalytics = function( trigger ){ 
    console.log("triggered by "+trigger);
    };
document.addEventListener("jqm_ready",function(){console.log("jqm_ready"); trigAnalytics("jqm_ready");},false);

And in overrides.js

console.log("Hello now");
var evt = document.createEvent("Event");

evt.initEvent("jqm_ready",true,true);
document.dispatchEvent(evt);

Works.

Answer 2

You have a typo in the event name, see:

document.addEventListener('mobilelinit', function(){
                                 ^----- TYPO HERE (should be mobileinit)

That is probably why you were not seeing the event.