Onsen 2.0 - Agregar escucha de eventos a Ons-Switch con Javascript

Me temo que me estoy perdiendo algo realmente simple, pero he intentado múltiples intentos con varios errores. En el código:

<script>
        document.getElementById("optStats").on("change", function(e) {
    alert("Switch changed!");
  });
    </script>
<ons-switch modifier="list-item" id="optStats"></ons-switch>

Entonces lo anterior no funciona. Genera un error deUncaught TypeError: Cannot read property of on of null. Así que supuse que necesitaba agregar la función a la función de inicio de carga, pero aún así falló con el mismo error.

He probado todas las opciones enumeradas aquí:https://onsen.io/guide/overview.html#EventHandling sin éxito. Esto incluiría usar var en lugar de id y casi cualquier otra cosa enumerada que pensé que funcionaría.

Editar: código completo que no funciona, pero funciona en codepen sin etiqueta de plantilla.

<ons-template id="options.html" >
        <ons-page>
            <ons-toolbar>
                <div class="center">Options</div>
            </ons-toolbar>         
            <ons-list modifier="inset" style="margin-top:10px;">
                <ons-list-item>
                  Detailed Stats
                  <ons-switch modifier="list-item" id="optStats"></ons-switch>
                </ons-list-item>
            </ons-list>            
        </ons-page>
    </ons-template>

Estoy usando esto en ons.ready () y lo he intentado fuera, lo que resulta en el mismo error,cannot read property of addEventListener, como se menciona arriba para ambos.

document.getElementById('optStats').addEventListener('change', function(e) {
      console.log('click', e.target.checked);
    });

Última actualización lo juro: ¡FINALMENTE! Gracias @ Fran-dios!

Después de trabajar con esto, init no es el evento que desea usar, definitivamente desea usar show para lo que estaba tratando de hacer.

document.addEventListener("show", function(event){
    if (event.target.id == "pgOptions") { 
        document.getElementById('optStats').addEventListener('change', function(e) {
            localStorage.setItem('useDetailedStats', e.target.checked); 
            useDetailedStats = e.target.checked;
        });
        document.getElementById('optStats').setChecked(useDetailedStats);
      } 
},false);

Por alguna razón, cuando se usa init en un<ons-tabbar>, cada vez que presione la pestaña, el interruptor cambiará de estado. Al usar show, no lo hace. Además, cuando registré la acción init, la página, aunque no se mostraba en el inicio de la aplicación, todavía se registraba como init dos veces. Mostrar no causa esto. De cualquier manera, el código que @ fran-dios proporcionó es la base correcta para obtener lo que necesitaba y su respuesta sigue siendo correcta, solo necesitaba usar un evento diferente.

Respuestas a la pregunta(1)

Su respuesta a la pregunta