6
respostas

Passando parâmetros para função anônima dentro do addEventListener

Eu queria passar parâmetros para a função anônima que é declarada dentro do método addEventListener, porém toda vez que declaro que a função recebe um parâmetro eu não tenho "onde" passar, porque a chamada da função já é na própria declaração e dentro da função o tipo do objeto vem como um "Event" e não como os parâmetros que eu queria passar. Outra coisa, se eu coloco uma função externa, com "nome", ela executa na hora que o javascript é carregado e a função de click para de detectar eventos.

6 respostas

No lugar de você usar o addEventListener(), tenta usar uma função normal. Exemplo:

function hello(name){
    alert(“Olá” + name);
}
<button onclick=”hello(‘José’);”>Hello</button>

Felipe, mostra no código como você está tentando fazer pra ver se consigo entender melhor a sua ideia?

Exemplo:

btn.addEventListener("click", function ("parametro") {

/faz alguma coisa aqui o problema é eu declaro que a função recebe o "parametro" e em nenhum momento eu passo o parâmetro para a função. Se eu pego esse parâmetro dentro da função ele me dá um objeto do tipo Event. / });

Outro exemplo:

function eventoDeClick("parametro") { //faz alguma coisa aqui }

var valor = 10;

btn.addEventListener("click", eventoDeClick(valor) ) ;

Quando eu passo uma função externa o navegador executa ela na hora que o JS é carregado e o EventListener para de funcionar.

Quero saber como passar um parâmetro tipo o valor ali para a função anônima e, se não tiver como, como passar via função externa sem que ocorra esse problema.

Oi Felipe, acredito que você tenha sim alguma forma de fazer isso, mas dessa forma que você está tentando fazer, não dá mesmo.

Isso por que no segundo caso, você está executando a função diretamente e no primeiro caso, você só vai ter acesso ao objeto Event do próprio evento.

Eu queria que você me desse uma motivação pra precisar de parâmetros ali, geralmente não fazemos nada desse tipo, por isso que não estou entendendo. É apenas uma curiosidade?

Inicialmente meu código estava ruim e eu precisava passar essa variável ali, depois refatorei mas a dúvida de como fazer ficou.

Felipe a forma que encontrei que é bem simples é a seguinte, no seu listener em si, você recebe apenas o event padrão, mas na funão de callback você chama uma outra função externa informando os demais parâmetros.

function minhaFuncao(param1, param2, param3){
    console.log(param1, param2, param3);
}

var bt = document.querySelector('.meu-botao');

bt.addEventListener('click', function(event){
    var param2 = "valor 2";
    var param3 = "valor 3";
    minhaFuncao(event, param2, param3)
});

Pegou a ideia? Mas isso só vai fazer sentido se minhaFuncao for usada em mais lugares. Ai você reaproveita o código.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software