ValueChange em Elemento oculto

[Omar~ 87]

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.

 

[Maujor 144]

@Omar

Não existe um evento chamado "ValueChange", portanto o correto é:

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

Segundo o script acima o console retornará e.target somente quando for disparado o evento change no elemento select. 
O click no botão dispara a função mudar() que altera o valor de select, mas não atrela o evento change no select.

 

Assim, o console não retorna e.target quando o botão é clicado estando select visível ou oculto.

[Omar~ 87]

É um evento específico que só funciona em alguns elementos em situações como a que eu definitivamente quero chegar,  no caso uma ação externa. change só detecta se o o evento é disparado pelo próprio elemento em questão e não por ação externa.

 

Na verdade a questão está sobre a tag <progress> e não no <select>, mas usei um seletor pois assim o script de exemplo ficaria mais simples de demostrar.

Enfim em todo caso o ValueChange só é disparado no MozillaFirefox

[Maujor 144]

1 hora atrás, Omar~ disse:

Enfim em todo caso o ValueChange só é disparado no MozillaFirefox

Independente disso ou de PROGRESS ou SELECT, não se trata de: "o javascript não detecta mudanças em elementos não visíveis."

Não é a visibilidade que está impedindo a identificação do elemento select no console.

Quer resolver? Defina o evento change do select dentro da função mudar(). 

[Omar~ 87]

@Maujor

Não importa cara, o evento change não é acionado por ação externa independente do elemento oculto ou não. Somente se o o próprio elemento em si o dispara.

 

Que seja consegui resolver minha situação aqui simulando a tag label, pelo fato dela se vincular a outro elemento, usei a mesma lógica que os browsers usam para a tag label.