Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

O que acontece quando eu coloco uma função com parênteses no addEventListener ?

Olá, essa minha dúvida foi parcialmente explicada nos outros tópicos relacionados, mas como eu fiquei com umas pulgas atrás da orelha resolvi abrir mais um.

Na videoaula o professor explica sobre o addEventListener e que ao passar uma função com os parênteses, nós vamos apenas executa-la e se ela retornar algo isso será executado pelo addEventListener, então depois de alguns testes eu fiz esse código:

function exibaAlgo(){
    console.log("Algo");
}

function passeIssoAdiante(){
    return exibaAlgo;
}

document.querySelector(".titulo").addEventListener("click",passeIssoAdiante());

Ai que eu pergunto:

Isso é usado?

Têm alguma performance?

Eu consigo receber ou usar algum parâmetro do addEventListener na função exibaAlgo?

O que foi que eu fiz aqui?

1 resposta
solução!

Boa tarde, Wilton! Como vai?

Como são várias perguntas, vou responder cada uma delas isoladamente!

O que foi que eu fiz aqui?

O que vc fez foi invocar a função passeIssoAdiante() e registrar no addEventListener() a função exibaAlgo() como callback do evento de click no elemento selecionado por document.querySelector(".titulo").

Isso é usado? Têm alguma performance?

Sim, é usado, mas não da forma como vc fez! Afinal de contas, o seu código é equivalente a registrar diretamente a função exibeAlgo(), dessa forma:

document.querySelector(".titulo").addEventListener("click", exibeAlgo);

E aí entra a sua última pergunta:

Eu consigo receber ou usar algum parâmetro do addEventListener na função exibaAlgo?

Sim, normalmente essa técnica é utilizada quando se deseja passar algum parâmetro para a função callback, como no exemplo a seguir:

function passeIssoAdiante(valor){
    return function () {
        console.log(valor);
    };
}

document.querySelector(".titulo").addEventListener("click",passeIssoAdiante(1));

Repare que a diferença desse código para o seu é que a função retornada por passeIssoAdiante() agora foi declarada internamente como uma função anônima. E, ao clicar no elemento document.querySelector(".titulo") o valor impresso será 1 pq a função interna anônima "lembrará" das variáveis que estavam no escopo da "função pai" passeIssoAdiante(). Essa técnica recebe o nome de closure.

Para saber mais sobre closure:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Closures

https://www.w3schools.com/js/js_function_closures.asp

Qualquer coisa é só falar!

Grande abraço e bons estudos!

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