Onsen 2.0 - Adicionando ouvinte de evento ao Ons-Switch com Javascript

Receio que esteja perdendo algo realmente simples, mas tentei várias tentativas com vários erros. Para o código:

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

Portanto, o acima não funciona. Isso gera um erro deUncaught TypeError: Cannot read property of on of null. Portanto, assumi que precisava adicionar a função à função init do onload, mas ela ainda falhou com o mesmo erro.

Eu tentei todas as opções listadas aqui:https://onsen.io/guide/overview.html#EventHandling sem sucesso. Isso incluiria o uso de var em vez de id e praticamente qualquer outra coisa listada que eu pensei que iria funcionar.

Edit: Código completo que não está funcionando, mas funciona no codepen sem a tag template.

<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>

Estou usando isso em ons.ready () e tentei fora, o que resulta no mesmo erro,cannot read property of addEventListener, conforme listado acima para ambos.

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

Última atualização: Juro: FINALMENTE !!!! Obrigado @ Fran-dios!

Depois de trabalhar com isso, init não é o evento que você deseja usar, você definitivamente deseja usar o show para o que eu estava tentando fazer.

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 qualquer motivo, ao usar o init em um<ons-tabbar>, sempre que você pressionasse a guia, a chave mudaria de estado. Usando show, isso não acontece. Além disso, quando registrei a ação init, a página, mesmo que não estivesse sendo exibida na inicialização do aplicativo, ainda estava sendo registrada como sendo iniciada duas vezes. O programa não causa isso. De qualquer forma, o código que o @ fran-dios forneceu é a base correta para obter o que eu precisava e a resposta dele ainda está correta, eu só precisava usar um evento diferente.

questionAnswers(1)

yourAnswerToTheQuestion