ValueChange em Elemento oculto

Pois cá estava eu fazendo algumas coisinhas e me deparei com uma questão.

Que o o javascript não detecta mudanças em elementos não visíveis.

Para ser mais coeso vamos ao exemplo:

<select id="teste">
 <option value="a">Opção A</option>
 <option value="b">Opção B</option>
</select>

<button onclick="mudar()">Alterar</button>

<script>
 var teste = document.getElementById('teste');

 teste.addEventListener('ValueChange', function (e) {
 console.log(e.target);
 });

 function mudar() {
 teste.value = teste.value === 'a' ? 'b' : 'a';
 console.log('Mudou para:' + teste.value);
 }
</script>

	Simples né, temos um seletor que contém um evento que detecta quando ele é modificado.

	E uma função que irá modificar o valor do seletor.

	Até aqui tudo bem.... Então ao X do problema.

	 

	Adicionamos isso na função que altera o seletor:

teste.style.display = 'none';

	Logo quando pelo botão alteramos o valor temos no console a exibição do elemento, e ocultando o seletor.

	Uma vez oculto o evento que detecta se seu valor é alterado não mais dispara.

	 

	Alguém teria alguma ideia de como contornar isso, fazendo com que o evento sempre dispare ao alterar o seletor (mesmo ele oculto)?

	 

	 

	Para ser franco, o único jeito que pensei em solucionar é:

	Alterar o opacidade do seletor para 0(zero), assim ele está visível mas transparente, então alterar suas dimensões height e width também para zero, assim não ocupando espaço no documento.

	Porém acho que essa minha solução não é a mais ideal.