Não repetir addEventListener

[Rafael da Silveira 1]

Galera, bom dia.

Tenho 3 Botões onde cada um carrega via ajax em uma light box uma página HTML;

Cada página vem com um addEventListener para escutar o evento do teclado e executar uma ação de acordo com a tecla digitada.

 

Até ae tudo bem. O problema começa, quando o lightBox é fechado.

Quando o usuario click novamente para abrir a lightBox, o evento é adicionado novamente e ele reconhece duas 'tecladas';

 

Aparece por exemplo: aa

 

OBS: Pô cara, usa o método on.

O método on não resolve, porque apaga o eventListener da outra ligthBox;

 

Preciso adicionar um addEventListener apenas uma vez, alguma idéia?

 

Abraços.

[Marcos_imasters 288]

tenta usando loop 

var butoes = document.querySelectorAll('.botao');
butoes.forEach(function(x){
butoes[x].  addEventListener("click", function(){
alert('ação')
});

 

[Rafael da Silveira 1]

O problema é que cada um executa uma ação diferente. O evento que preciso chamar é o keydonw.

 

E preciso fazer isso em várias light box, via php em um for vindo do banco de dados. 

Cada light box tem um tipo que diz qual o evento de ser adicionado quando ela for clicada.

pra você entender...

algumas vão digitar algo na light a partir das teclas digitadas, outras vão verificar as setas, e outras números. essa função vai ser ativada quando a ligth é carregada, eu vejo o tipo e adiciono o evento.

[Rafael da Silveira 1]

Consegui resolver criando flag,

 

-Verifico se existe a flag

-se não existir adiciono o evento

-no final do evento crio a flag

 

Desse forma ele só vai adicionar o evento na primeira vez que a página for carregada via ajax, caso seja carregada outras vezes o evento não vai se repetir

if(typeOf flagImage == "undefined"){
	window.addEventListener('onkeydown',function(e){
    	if(lightBoxCliked == 'Images'){
           document.querySelector('text').innerHTML += e.key;
        }
      
      flagImage =  true;
    });
}